如何将 object 的嵌套数组转换为 Json object

Question

使用React 或 JavaScript如何将下面的示例嵌套对象数组转换为 JSON：有什么解决方案吗？ 对于这个问题的反应？ 我尝试通过 map 解决这个问题，但是，在变量中它将存储最后一个值，剩余的子对象被覆盖

Here i want to bind Json data into Fluent UI detailList with reference of filed name later i need to export in different format like excel... for exporting excel we have to call data by filed name thats the reason whatever nested Json data is there i试着制作简单的 Json 格式

Fluent 表示例： https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist

{
  "msg": "hello world",
  "success": "true",
  "Details": [
    {
      "group": "grp1",
      "personDetails": [
        {
          "firstName": "abc",
          "lastName": "xyz",
          "mobile": 12334,
          "state": "abc"   
        }
      ]
    },
    {
      "group": "grp1",
      "personDetails": [
        {
          "firstName": "abc",
          "lastName": "xyz",
          "mobile": 12334,
          "state": "abc"   
        },
        {
          "firstName": "abc",
          "lastName": "xyz",
          "mobile": 12334,
          "state": "abc"   
        }
      ]
    }
  ]
}

如何将上面的 Json object 转换为以下格式：Expexted Json 格式

[
 
  {
    firstName: "abc",
    lastName: "xyz",
    mobile: 12334,
    state: "abc",
  },
  {
    firstName: "abc",
    lastName: "xyz",
    mobile: 12334,
    state: "abc",
  },
  {
    firstName: "abc",
    lastName: "xyz",
    mobile: 12334,
    state: "abc",
  },
];

Answer 1

首先，您要实现的部分目标是无效的 JSON 语法，因为您不能在数组中包含键值对。 因此[ "msg": "hello world", "success": "true"是不可能的。

但是，您可以执行以下操作：

Details.flatMap((element) => element.personDetails));

Wich 将获取所有嵌套元素并将它们返回到一个单一的“平面”数组中。 然后，您可以使用此结果将其与您的msg和success属性一起放入 JSON object中。

考虑在此处阅读有关 JSON 的更多信息。 还有更多关于Array.flatMap 的信息。

Answer 2

我找到了解决方案，如果有人遇到此类问题，您可以通过 go 彻底执行以下步骤。

var array = [];

source["Details"].forEach((i) => array.push(...i["personDetails"]));

console.log(array);

Answer 3

这是使用对象扫描的灵活易读的解决方案

 // const objectScan = require('object-scan'); const data = { msg: 'hello world', success: 'true', Details: [ { group: 'grp1', personDetails: [ { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' } ] }, { group: 'grp1', personDetails: [ { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' }, { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' } ] } ] }; const r = objectScan(['Details[*].personDetails[*]'], { rtn: 'value' })(data); console.log(r); // => [ { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' }, { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' }, { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' } ]

 .as-console-wrapper {max-height: 100%;important: top: 0}

 <script src="https://bundle.run/object-scan@14.0.0"></script>

免责声明：我是对象扫描的作者

Answer 4

尝试这个

 const result = { msg: "hello world", success: "true", Details: [ { group: "grp1", personDetails: [ { firstName: "abc", lastName: "xyz", mobile: 12334, state: "abc", }, ], }, { group: "grp1", personDetails: [ { firstName: "abc", lastName: "xyz", mobile: 12334, state: "abc", }, { firstName: "abc", lastName: "xyz", mobile: 12334, state: "abc", }, ], }, ], }; const items = result.Details.map((item) => item.personDetails); console.log(items.flat());