如何在查询字符串中转换多维数组？

Question

我有以下数组，对象内部有多个数组，如何生成查询字符串，输出应该在哪里。

其中 services 和 accountTypes 例如是数组中的条目，它成为查询字符串中的键。

查询字符串中的值为每个数组中的id from 对象

输出应该是例如

services=10&services=30&accountTypes=20

数组

[
  {
    "services": [
      {
        "id": "10",
        "name": "PIX"
      },
      {
        "id": "30",
        "name": "Income"
      },
    ],
    "accountTypes": [
      {
        "id": "20",
        "name": "Digital Account"
      }
    ]
  }
]

我试过的功能 我尝试使用 encodeURIComponent 如下所示，但它正在生成 undefined

const params = initialFilterDataJson.map((param: QueryParamsType) => {
    return encodeURIComponent(param.key) + '=' + encodeURIComponent(param.id)
  })
  const queryString = params.join('&')

http://localhost:3000/api/accounts?undefined=undefined

Answer 1

您的代码在数据结构中的嵌套不够深。需要有嵌套循环，首先访问外层数组中的对象，然后访问这样一个对象的键（有对应的数组），然后再访问这样一个数组中的每个内部对象：

const initialFilterDataJson = [{"services": [{"id": "10","name": "PIX"},{"id": "30","name": "Income"},],"accountTypes": [{"id": "20","name": "Digital Account"}]}];

const queryString = initialFilterDataJson.flatMap((param) =>
    Object.entries(param).flatMap(([key, arr]) =>
        arr.map(({id}) => encodeURIComponent(key) + '=' + encodeURIComponent(id))
    )
).join('&');

console.log(queryString);

旁注：某些网络服务器可以更好地处理查询字符串中带有 [] 后缀的重复键，例如 services[]=10&services[]=20.

如何在查询字符串中转换多维数组？

How to convert array multidimensional in query string?

javascript

query-string

ecmascript-6

reactjs