在 Typescript 中解析 JSON 数组

Posted 2023-03-13

【中文标题】在 Typescript 中解析 JSON 数组

【英文标题】：Parse JSON array in Typescript

【发布时间】：2017-05-15 11:26:50

【问题描述】：

我以这种方式收到来自远程服务器的 JSON 响应：

  "string": [
    
      "id": 223,
      "name": "String",
      "sug": "string",
      "description": "string",
      "jId": 530,
      "pcs": [
        "id": 24723,
        "name": "String",
        "sug": "string"
      ]
    , 
      "id": 247944,
      "name": "String",
      "sug": "string",
      "description": "string",
      "jlId": 531,
      "pcs": [
        "id": 24744,
        "name": "String",
        "sug": "string"
      ]
    
  ]

为了解析响应，列出“名称”和“描述”，我写了这段代码：

interface MyObj 
  name: string
  desc: string

let obj: MyObj = JSON.parse(data.toString());

我的问题是如何将名称和描述获取到可以显示的列表中。

【参考方案1】：

您为解析的数据提供了错误的类型。应该是这样的：

interface MyObj 
  name: string
  description: string


let obj:  string: MyObj[]  = JSON.parse(data.toString());

所以它不是MyObj，它是具有string 属性的对象，其中包含MyObj 的数组。你可以像这样访问这些数据：

console.log(obj.string[0].name, obj.string[0].description);

除了使用匿名类型，你也可以为它定义interface：

interface MyRootObj 
  string: MyObj[];


let obj: MyRootObj = JSON.parse(data.toString());

【讨论】：

对已经很好的答案的补充说明：不能保证JSON.parsed 数据确实符合解析后定义的接口。如果服务器突然发送其他数据，它可能不再符合它，并且通过先前预期的接口访问数据可能会导致崩溃。因此，始终建议在解析和使用数据之间验证数据。

这确实是一个很好的答案，但是，如果我要插入 html，请问该怎么做。我使用了*ngFor = "let obj of foundData"，但似乎无法获取名称列表

哦，@Matthias247，请问我该如何验证数据？

@JendorskiLabs <p *ngFor = "let item of obj.string"> item.name </p>

谢谢，我已经试过了。来自 javascript 控制台的错误读取 Cannot read property 'string' of undefined。我也试过<p *ngFor = "let item of obj"> item.string[0].name </p> 无济于事。