Question

我有一个包含以下内容的JSON文件：

{
  "tables": [
    {
      "columns": [
        "Id",
        "Name",
        "Age"
      ],
      "data": [
        [
          "1",
          "John",
          "20"
        ],
        [
          "2",
          "Jessy",
          "34"
        ],
        [
          "3",
          "James",
          "29"
        ],
        ...
      ], ...
  ]
}

目标是像这样归档键值对：

[
  {
    "Id": "1",
    "Name": "John",
    "Age": "20"
  },
  ...
]

我想我可以使用Angular的KeyValue-Interface，但是没有得到上面的结果。我尝试了以下方法，但结果是错误的。

Component:
...
import { KeyValue } from '@angular/common';
...
keyValueData: KeyValue<string, string>;

ngOnInit() {
  this.getData();
}

getData() {
  this.dataService.getAllData()
      .subscribe(resp => {
        this.keyValueData = 
          {
            key: resp['tables'][0]['columns'],
            value: resp['tables'][0]['data']
          };
  });
}

有任何想法吗？

Answer 1

如果您的json看起来像这样

 {
  "tables": [
    {
      "columns": [
        "Id",
        "Name",
        "Age"
      ],
      "data": [
        [
          "1",
          "John",
          "20"
        ],
        [
          "2",
          "Jessy",
          "34"
        ],
        [
          "3",
          "James",
          "29"
        ],
      ]
   }
  ]
}

您可以像这样获得所需的结果。您可以如下更改组件代码。

getData() {
  this.dataService.getAllData()
      .subscribe(resp => {
    var result=[];
    var column = [];
    resp.tables.forEach((table)=>{
    column=table.columns;
    table.data.forEach((data)=>{
    if(data.length == column.length){
      var tempData = {};
      column.map((cldata,index)=>{
      tempData [cldata]=data[index]
     });
      result.push(tempData );
    }
     });
   });
   console.log(result);
   this.keyValueData=result;
  });
}

Answer 2

您可以创建类似这样的界面

export interface IKeyValue<T> {
    key: string;
    value: T;
}

并且您可以传递任何要使用的值类型，这里t是泛型类型，键始终为String。

如何在Angular 7中使用KeyValue接口？

2 个答案: