Convert the nested array to single array

Question

I have array format like this

 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 }, ] }] } ], } 

and the required format is

 { "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 }, ], 

The array format is in dynamic which keeps changing except the district and the district has to be at the beginning of the array.

Html should be in this format

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

This is how the html should look like as the data is dynamic and keeps changing other then district

This is what i have tried to rearrange the array

 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

You could pull out the wanted properties and assemble a new objects for each level.

 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

Use some format function:

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