Typescript 使用来自API调用的JSON数据的Angular

发布于11月18日

我从后端Web服务获得以下JSON数据.

[
    {
        "id": 10,
        "name": "My Name1",
        "age": 25,
        "jsonData": null
    },
    {
        "id": 15,
        "name": "My Name2",
        "age": 25,
        "jsonData": "{\"Address\":\"My Address 123\",\"City\":\"My City\",\"PostalCode\":\"ABC-123-DEF\",\"Country\":\"My Country\"}"
    }
]

我可以用ngFor在组件html上循环数组，但如何读取"地址"、"城市"等"jsonData"字段呢？

推荐答案

您需要将jsonData从string转换为JSON.parse(<JSON string>)的对象类型.

请注意，这可以在返回Observable/Response期间通过map(RxJS)操作符执行.

请注意，你的jsonData可能是null，所以你必须在转换之前判断jsonData是真实的.

import { map } from 'rxjs';

this.http.get<any[]>('<API URL>').pipe(
  map((resp: any[]) =>
    resp.map((x: any) => ({
      ...x,
      jsonData: !!x.jsonData ? JSON.parse(x.jsonData) : null,
    }))
  )
);

Demo @ StackBlitz个