将嵌套数组转换为单个数组

Question

我有这样的数组格式

 response = { "data": [{ "districts": [{ "id": 1, "name": "sikkim district", "statistics": [{ "food saftey": 2, "food ": 2, "air pollution": 0 }, { "food saftey": 5, "food ": 6, "air pollution": 7 }, { "food saftey": 7, "food ": 6, "air pollution": 0 } ] }] }, { "districts": [{ "id": 2, "name": "Bhojpur", "statistics": [{ "food saftey": 1, "food ": 1, "air pollution": 1 }, { "food saftey": 5, "food ": 7, "air pollution": 6 }, ] }] } ], } 

所需的格式是

 { "data": [{ "district": "sikkim district", "food saftey": 2, "food ": 2, "air pollution": 0 }, { "district": "sikkim district", "food saftey": 5, "food ": 6, "air pollution": 7 }, "district": "sikkim district", { "food saftey": 7, "food ": 6, "air pollution": 0 }, { "district": "Bhojpur", "food saftey": 1, "food ": 1, "air pollution": 1 }, { "district": "Bhojpur", "food saftey": 5, "food ": 7, "air pollution": 6 }, ], 

数组格式是动态的，除了区和区必须位于数组的开头外，它会不断变化。

HTML应该采用这种格式

 <table id="dataTable1" class="table table-condensed table-bordered custom-col-auto row-border hover"> <thead> <tr> <th class="custom-header-col" *ngFor="let column of columns"> {{column}} </th> </tr> </thead> <tbody> <tr *ngFor="let data of reportsComplainTypeData"> <td class="custom-body-col" *ngFor='let column of columns'>{{data.data[column]| json}}</td> </tr> </tbody> </table> 

这是html的样子，因为数据是动态的，并且不断变化，然后区域

这就是我试图重新排列数组

 response.data.filter(item => { item.districts.filter(item1 => { item1.statistics.map(data => { value.push({ districts: item1.name, data }) }) }) }) value.map(item => { item.data.districts = item.districts delete item.districts; }) 

Answer 1

您可以拉出所需的属性，并为每个级别组装一个新对象。

 var response = { data: [{ districts: [{ id: 1, name: "sikkim district", statistics: [{ "food saftey": 2, "food ": 2, "air pollution": 0 }, { "food saftey": 5, "food ": 6, "air pollution": 7 }, { "food saftey": 7, "food ": 6, "air pollution": 0 }] }] }, { districts: [{ id: 2, name: "Bhojpur", statistics: [{ "food saftey": 1, "food ": 1, "air pollution": 1 }, { "food saftey": 5, "food ": 7, "air pollution": 6 }] }] }] }; response.data = response.data.reduce((r, { districts }) => districts.reduce((s, { name: district, statistics }) => statistics.reduce((t, statistic) => [...t, { district, ...statistic }], s), r ), [] ); console.log(response.data); 

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

Answer 2

使用一些格式功能：

function formatResponse(response) {
  return response.data.map((item) => {
    let district = item.districts[0];
    obj = {name: district.name};
    return Object.assign(obj, district.statistics[0]);
  });
}