时间戳

首页 > 解决方案 > 如何在查询字符串中转换数组多维？

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

问题描述

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

例如，在哪里是来自数组的条目，它成为查询字符串中的一个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

标签： javascriptreactjsecmascript-6query-string

解决方案

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

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);

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

推荐阅读