打字稿：为 json 定义一个对象

Question

我需要把这个json

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

成一个对象，就是不知道怎么定义适合这个json的对象。我挣扎了很多，所以请帮助我。提前谢谢你

Answer 1

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

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

在你的控制器中

private origin: Origin;

并在 return 的函数中得到结果

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

希望有用

Answer 2

我会在@A.khalifa 回复中补充说，您可以使用 JSON.parse() 将这个 JSON 变成一个对象。

Answer 3

你可以做点什么

假设响应是任何 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,
     "attr1": "...",
     "origin": [{
        "id": "x2",
        "severity": 50,
        "timestamp": 1599229766,
        "attr1": "...",
        "attr2": 555,
        "attr3": "...",
        "origin": []
    },
    {
        "id": "x1",
        "severity": 25,
        "timestamp": 1599229166,
        "attr1": "...",
        "origin": []
    }
  ]
}]

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

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>

打字稿：为 json 定义一个对象

Typescript: defining an object for a json

json

angular

typescript

object

definition