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

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

标签： javascriptangulartypescript

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