如果对象内有对象，如何在打字稿中解析 json 数据答案

【问题标题】：How to parse json data in typescript if there is object inside object如果对象内有对象，如何在打字稿中解析 json 数据
【发布时间】：2017-05-18 16:35:56
【问题描述】：

我有一个 json 数据，例如：

{"extra":"main menu",
"menu":[
{"id":1,"name":"Menu 1"}
,{"id":2,"name":"Menu 2"}
,{"id":3,"name":"Menu 3"}
,{"id":4,"name":"Menu 4"}
,{"id":5,"name":"Menu 5"}
,{"id":6,"name":"Menu 6",
 "menu":[
         {"id":7,"name":"Menu 7.1"},
         {"id":8,"name":"Menu 7.2"},
         {"id":9,"name":"Menu 7.3"}
]},
{"id":10,"name":"Menu 8  "},
{"id":12,"name":"Menu 9 "},

}

我有一个这样的课程菜单：

export class Menu {
constructor(public id?: number , public name?: string ){}
}

还有一个类似的解析器：

export class ParserMenu {

constuctor(public module?: string , public menu?: Menu[])
}

我可以获取数据并正确解析它，但问题是当我在菜单中有一个菜单时，我不知道如何解析这些数据，那么解决这个问题的解决方案是什么？

【问题讨论】：

标签： json angular typescript

【解决方案1】：

我建议你使用接口而不是类，我认为这里没有必要使用类；）所以它看起来像这样：

export interface Menu {
  id: number;
  name: string;
  menu?: Menu[]
}

然后，您只需在检索数据时（我假设它来自后端）通过从menu 提取数据，将您的 JSON 转换到此接口：

服务：

getData(): Observable<Menu[]>{
  return this.http.get('theUrl')
    .map(res => res.json().menu)
}

在组件中：

menues: Menu[];

this.service.getData()
  .subscribe(data => {
    this.menues = data;       
  })

现在您有了Menu 类型的数据。值得一提的是，在运行时不存在接口，因为 JS 中没有接口。接口更多的是对程序员和 IDE 的帮助。如果您尝试做错事，例如为属性分配错误的类型，IDE 会在编译期间向您发出警告。

【讨论】：

【解决方案2】：

JSON.parse() 不会实例化您的任何类。因此，您最好使用接口而不是类来对 JSON 的结构进行建模。

但是，如果您在菜单中有一个菜单，那么……该菜单也将在JSON.parse() 创建的对象的菜单中。您可以使用result.menu[5].menu 访问它。

因此，您需要在Menu 内的Array<Menu> 类型的menu? 属性。

【讨论】：

你能给我一些代码示例如何完全解析它吗？
JSON.parse(jsonString) 确实完全解析它。不知道你在问什么。