时间戳

首页 > 解决方案 > 如何在 JavaScript 中将多个数组对象转换为查询字符串参数

javascript - 如何在 JavaScript 中将多个数组对象转换为查询字符串参数

问题描述

我在下面有以下带有多个数组的对象。

{
  "services": [
    {
      "id": "100",
      "name": "PIX"
    },
    {
      "id": "200",
      "name": "Rendimentos"
    }
  ],
  "channels": [
    {
      "id": "300",
      "name": "Chat"
    }
  ]
}

这个想法是生成查询字符串，类似的东西。

服务=100&服务=200&渠道=300

我知道你可以用 map 和 join 做到这一点，但我会知道它是否是一个纯对象，现在下面的这种格式，我很困惑

标签： javascriptjsonreactjsquery-string

解决方案

您可以使用URLSearchParams() API。

迭代您的数据并附加键/值对或映射条目数组以传递给构造函数

我不知道是什么决定了您从显示的数据中显示的预期输出，因此我使用更简单的数据结构进行演示。

您可以结合URL()API 来创建完整的 url 字符串，如下所示

const data = [
  {name:'foo', value:10},
  {name:'bar', value:20}
]

// Loop and append key/values
const params = new URLSearchParams();
data.forEach(e => params.append(e.name, e.value));
console.log('params:', params.toString());

// Alternate approach passing entries array to constructor
const params2 = new URLSearchParams(data.map(e => [e.name,e.value]));
console.log('params2:',params2.toString())

//Adding to a URL
const url = new URL('http://example.com')
url.search = params

console.log('Full url:',url)

使用有问题的更新数组数据：

const data={services:[{id:"100",name:"PIX"},{id:"200",name:"Rendimentos"}],channels:[{id:"300",name:"Chat"}]};

const entries = [];
Object.entries(data).forEach(([k,arr])=> arr.forEach(({id}) => entries.push([k,id])));

const params = new URLSearchParams(entries);

const url = new URL('http://example.com')
url.search = params;

console.log(url)

推荐阅读