将数组传递到 URLSearchParams，同时使用 get 请求的 http 调用

Question

查看 URLSearchParams 的 Angular 文档，我没有找到任何关于将数组作为参数传递的文档。

有人可以帮忙吗？

Answer 1

事实上，你不能直接传递一个数组，但你可以多次使用append方法：

let params = new URLSearchParams();
params.append('arrayparams', 'val1');
params.append('arrayparams', 'val2');
params.append('arrayparams', 'val3');
console.log(params.toString());

Answer 2

我已经使用 Lodash map 迭代 objects/arrays 并动态附加参数。


const buildParams = (data) => {
  const params = new URLSearchParams();

  map(data, (value, key) => {
    if (Array.isArray(data[key])) {
      map(value, item => params.append(key, item));
    } else {
      params.append(key, value);
    }
  });

  return params;
};

const params = {
  foo: ['a', 'b', 'c'],
  bar: 'xyz'
}

const doFetch = fetch(`http://api.com/search?${buildParams(params)}`)

所以最后的 URL 看起来像：http://api.com/search?foo=a&foo=b&foo=c&bar=xyz

Answer 3

URLSearchParams 可以传递一对序列，因此要有一个值数组：

var ids = [1,2,3,4]
var search = new URLSearchParams(ids.map(s=>['id',s]))
var searchString = search.toString()
// "id=1&id=2&id=3&id=4"

// To get the ids from the URL search string
var search_ids = [...search.getAll('id')]

Answer 4

         makeSearchParams(link){
            var url = new URL(window.location.protocol + '//' + window.location.host + link);
            const params = this.getSearchParams();

            for(let key in params){
                if(Array.isArray(params[key])){
                    for(let key1 in params[key]){
                        url.searchParams.append(key +'[]', params[key][key1]);
                    }
                }
                else
                    url.searchParams.append(key, params[key]);
            }
            return url;
        }

Answer 5

const buildParams = (search) => {
  if (!search) return "";

  const params = new URLSearchParams();

  Object.entries(search).forEach(([key, value]) => {
    if (Array.isArray(value)) params.append(key, value.join(","));
    else params.append(key, value.toString());
  });

  return `?${params}`;
};

const search = {
  types: ['good', 'bad', 'normal'],
  id: 777
}

const url = `http://good.com/${buildParams(search)}`;

因此，您将获得http://good.com/?types=good,bad,normal&id=777

Answer 6

实际上这是最简单的功能方式：

const url = new URL('http://localhost/')
url.searchParams.append('date[0]', date1)
url.searchParams.append('date[1]', date2)
console.log(url.toString())

当然可以遍历数组。

Answer 7

如果您想使用@washington-braga 的方法但又不想安装 lodash：

function buildParams(data) {
    const params = new URLSearchParams()

    Object.entries(data).forEach(([key, value]) => {
        if (Array.isArray(value)) {
            value.forEach(value => params.append(key, value.toString())
        } else {
            params.append(key, value.toString())
        }
    });

    return params.toString()
}

Answer 8

这是一个自动将数组值作为多个 entries/keys 添加到查询字符串中的函数。

与已发布的其他解决方案的不同之处在于，它更易于阅读并且只考虑数组 - 无需再次附加所有其他对象键。

function convertToQueryUrl(obj: never): string {
    const params = new URLSearchParams(obj);
    for (const [key, value] of Object.entries(obj)) {
        if (Array.isArray(value)) {
            params.delete(key);
            value.forEach((v) => params.append(key, v));
        }
    }
    return params.toString();
}

将数组传递到 URLSearchParams，同时使用 get 请求的 http 调用

Passing array into URLSearchParams while consuming http call for get request

angular2-http

angular