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

Question

我有一个包含多个数组的以下对象。

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

这个想法是生成查询字符串，类似于以下格式：

services=100&services=200&channels=300

我知道你可以使用map和join来实现，但我想知道是否可以使用一个纯对象来实现。对于下面的格式，我感到困惑。

- Renan Bessa

---

我不明白你所说的“但是如果它是一个纯粹的对象，我会知道”的意思。为什么你不使用map等方法呢？ - undefined

你自己有没有尝试过什么？为什么服务突然变成了100和200？ - undefined

@SuperDJ 看起来是将数组中的项目数量乘以100。 - undefined

@evolutionxbox。我已经用data json编辑了答案。 - undefined

Answer 1

你可以使用 URLSearchParams() API。

迭代你的数据，附加键/值对或将 entries 数组映射到构造函数中传递。

我不知道决定所显示的预期输出的是什么，因此在演示目的下使用了一个更简单的数据结构。

你可以与 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)

- charlietfl

Answer 2

看起来你卡在了尝试使用map()或join()迭代对象上，直接这样做是不行的。相反，你可以使用Object.entries将对象转换为数组并对其进行迭代。由于有嵌套的map()，所以在join()之前需要先使用flat()。

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)

- Kinglish