如果对象内有对象，如何解析typescript中的json数据

Question

我有一个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[])
}

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

Answer 1

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

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

你需要一个menu? 属性，类型为Array<Menu> ，在Menu 。

Answer 2

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

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可以在编译期间向您发出警告，例如为属性分配错误的类型。