打字稿：为json定义对象

问题描述

我需要放这个json

"id": "x1","severity": 100,"timestamp": 1599230966,"attr1": "...","attr2": "...","origin": [{
    "id": "x3","severity": 75,"timestamp": 1599230366,"origin": [{
            "id": "x2","severity": 50,"timestamp": 1599229766,"attr2": 555,"attr3": "...","origin": []
        },{
            "id": "x1","severity": 25,"timestamp": 1599229166,"origin": []
        }
    ]
}]

变成一个对象，而我只是不知道如何定义适合此json的对象。我已经很努力了，所以请帮助我。预先谢谢你

解决方法

您需要创建一个接口并将其分配给结果。

export interface Origin{
  id?: string;
  severity?: number;
  timestamp?: number;
  attr1?: string;
  attr2?: string;
  orginArray: Origin[];
}

在您的控制器中

private origin: Origin;

并返回结果的功能

this.origin = result;

//第二个选择

// main.ts

export interface IOrigin {
      id?: string;
      severity?: number;
      timestamp?: number;
      attr1?: string;
      attr2?: string;
      origin: IOrigin[];
    }

class Origin implements IOrigin {
      id?: string;
      severity?: number;
      timestamp?: number;
      attr1?: string;
      attr2?: string;
      origin: Origin[];
  constructor(values: IOrigin) {
      this.id = values.id;
      // assign all your attributes
      this.origin = values.origin !== undefined ? toOriginList(values.origin) : undefined;
  }
}


function toOriginList(values: IOrigin[]): Origin[] {
    return values.map(tree => new Origin(tree));
}

希望有用

,

我要添加到@ A.khalifa响应中，您可以使用JSON.parse()将此JSON转换为对象。

,

你可以做些事情

假定响应是任何API响应

obj: any; // you can create interface and add type

response = {
  "id": "x1","severity": 100,"timestamp": 1599230966,"attr1": "...","attr2": "...","origin": [{
     "id": "x3","severity": 75,"timestamp": 1599230366,"origin": [{
        "id": "x2","severity": 50,"timestamp": 1599229766,"attr2": 555,"attr3": "...","origin": []
    },{
        "id": "x1","severity": 25,"timestamp": 1599229166,"origin": []
    }
  ]
}]

将响应分配给您的类变量，以便您可以从模板访问它

ngOnInit() { 
  this.obj = response
}

或通过任何获得响应的方法

fetch() {
 // some logic to get api response

 // assign response to obj
 this.obj = response
 }  

在模板中，您可以访问完整的对象

<div> {{ obj.id }} </div>

遍历对象数组

<div *ngFor="let origin of obj.origin"> 
  {{ origin.id }}
  {{ origin.severity }}
  {{ origin.timestamp }}
  ....
</div>