首页 > 解决方案 > 使用 javascript 展平嵌套的 json 数组

问题描述

我有以下 JSON 数组:

[  
    { id: 1, name: "P1", groups: [ { id: 1.1, name: "G1.1" }, { id: 1.2, name:"G1.2" }]}, 
    { id: 2, name: "P2",  groups: [ { id: 2.1, name: "G2.1" }, { id: 2.2, name:"G2.2" }]} 
];

使用 Javascript ES6 将其转换为以下结构的最有效方法是什么?

[ 
    { id: 1, name: "P1", group_id: 1.1, group_name: "G1.1"},
    { id: 1, name: "P1", group_id: 1.2, group_name: "G1.2"},
    { id: 2, name: "P2", group_id: 1.1, group_name: "G2.1"},
    { id: 2, name: "P2", group_id: 1.1, group_name: "G2.2"},
]

标签: javascriptarraysmultidimensional-arrayecmascript-6

解决方案


有一些问题。

  1. 如果是json数组,应该是这样的。

var obj = [{
    "id": 1,
    "name": "P1",
    "groups": [{
        "id": 1.1,
        "name": "G1.1"
    }, {
        "id": 1.2,
        "name": "G1.2"
    }]
},
{
    "id": 2,
    "name": "P2",
    "groups": [{
        "id": 2.1,
        "name": "G2.1"
    }, {
        "id": 2.2,
        "name": "G2.2"
    }]
}
];

您可以使用此链接验证 json 数组


  1. 它对你的输出有点困惑。这就是它投票否决的原因。

设置数组后,您可以使用ForEach它。

var obj = [{
    "id": 1,
    "name": "P1",
    "groups": [{
        "id": 1.1,
        "name": "G1.1"
    }, {
        "id": 1.2,
        "name": "G1.2"
    }]
},
{
    "id": 2,
    "name": "P2",
    "groups": [{
        "id": 2.1,
        "name": "G2.1"
    }, {
        "id": 2.2,
        "name": "G2.2"
    }]
}
];

res = [];

obj.forEach((e)=>{
  e.groups.forEach((group)=>{
    res.push({
      "id" : e.id,
      "name" : e.name,
      "group_id" : group.id,
      "group_name" : group.name
    });
  });
});

console.log(res);


推荐阅读