javascript - 在对象数组的开头移动一个元素

Question

我有这样的数组格式

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

}

要求的格式是

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

数组格式是动态的，除分区外不断变化并且分区必须在数组的开头。

Answer 1

您可以做的是先将您知道的属性放入列数组中，然后获取其他属性并使用列数组中的顺序循环。

像这样:

Stackblitz

import {
  Component
} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = [{
      "Bal Vivah": 1,
      "Type": 0,
      "districts": "East District"
    },
    {
      "Bal Vivah": 1,
      "Type": 0,
      "districts": "West District"
    },
    {
      "Bal Vivah": 1,
      "Type": 0,
      "districts": "North District"
    }
  ]

  columns: string[] = ["districts"];

  constructor() {
    // get the columns from the data
    if (this.data) {
      var dataObject = this.data[0];
      for (var property in dataObject) {
        if (property != "districts" && dataObject.hasOwnProperty(property)) {
          this.columns.push(property);
        }
      }
    }
  }
}

<table>
  <thead>
    <tr *ngFor="let column of columns">
      <th>{{column}}</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let columnData of data">
      <tr *ngFor="let column of columns">
        <td>
          {{columnData[column]| json}}
        </td>
      </tr>
    </ng-container>
  </tbody>
</table>

注意:我将您的数据更改为有效的 json。