1

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

Improve this question
6
  • 1
    What is your question? And what have to done so far? Commented Jan 17, 2019 at 10:08
  • i need the nested array in single array Commented Jan 17, 2019 at 10:12
  • Your JSON is full of arrays that in this example only have one object. Why are those arrays? Can there be more than one object? Commented Jan 17, 2019 at 10:17
  • What did you try? Can you show us some code? Please read how to ask a good question then edit your question to improve it. Thank you! Commented Jan 17, 2019 at 10:22
  • you can check my code Commented Jan 17, 2019 at 10:29

2 Answers 2

Reset to default
5

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

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

i have tried somthing like this the issue is i need the district at the beginning of the array buts its comming at the last
with this approach as well?
hey its working thank you so much and district is at beginning
but this is not working if statistics array has two objects for same district
maybe, do you have some data and the wanted result? what should happen with more of the same in this case?
|
0

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]);
  });
}
Improve this answer

Comments