JavaScript 如何将多数组对象转换为查询字符串参数

Question

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

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

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

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

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

Answer 1

您可以使用 URLSearchParams() API.

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

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

您可以结合 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)

Answer 2

看起来您在尝试使用 map() 或 join() 迭代对象时挂断了，您不能直接这样做。相反，您可以使用 Object.entries 将对象转换为数组并对其进行迭代。因为有一个嵌套的 map() 你可以 flat() 它在 join()

之前

let obj = {
  "services": [{
      "id": "100",
      "name": "PIX"
    },
    {
      "id": "200",
      "name": "Rendimentos"
    }
  ],
  "channels": [{
    "id": "300",
    "name": "Chat"
  }]
}
let queryString = Object.entries(obj).map(s => s[1].map(e => `${s[0]}=${e.id}`)).flat().join('&')
console.log(queryString)

JavaScript 如何将多数组对象转换为查询字符串参数

How to Turn a Multiple Array Object into Query String Parameters in JavaScript

javascript

json

reactjs

query-string