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

【问题标题】：Typescript: defining an object for a json打字稿：为json定义一个对象
【发布时间】：2020-12-24 09:58:07
【问题描述】：

我需要放这个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的对象。我挣扎了很多，所以请帮助我。提前谢谢你

【问题讨论】：

把这个JSON放到一个对象中是什么意思？您可以通过 const obj = response? 将 JSON 响应分配给对象。您能否更具体一些或发布您的努力？
是的，对不起，我需要创建一个对象来保存来自这个 json 的数据，我还需要引用它的属性，比如 id 和其他。我试图声明一个具有 json 中所有属性的对象，但没有奏效。我认为这是因为 json 每次都带有不同数量的属性，我不能只为这个示例硬编码它
那个 JSON 是从哪里来的？正如我所说，您只需将此 JSON 分配给一个变量，然后您就可以访问它。更好地创建 stackblitz
所以如果我只做 const obj = response 我可以在 html 中显示它，例如 {{obj.id}}？我会尝试进行堆栈闪电战，但我必须先弄清楚如何表达我的问题：D 因为我真的不能
是的，但对于那个obj 不应该是const obj 而是一个类变量obj

标签： json angular typescript object definition

【解决方案1】：

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

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

希望有用

【讨论】：

好的，再问一个问题，我如何才能访问 origin 变量中的 Origin 数组？
是的，但由于某种原因它仍然没有填满数组
和 origin[] 仍未定义

【解决方案2】：

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

【讨论】：

【解决方案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": []
    }
  ]
}]

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

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>

【讨论】：