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

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

2 个答案: