How to parse this json structure in listview angular2 nativescript
json结构:
1 2 3 4 5 6 7 | { "Employee": [ {"id":1,"name":"Dan" }, {"id":2,"name":"Stack" }, ..... ] } |
app.component.ts:
1 2 3 4 5 6 7 8 9 10 11 | ngOnInit() { console.log("first","Test"); this.globalReader.getObjectData() .subscribe(data => this.getData = JSON.stringify(data), ---> Response printed successfully here.I'm able to print it in label. error => alert(error), () => console.log("finished") ); } |
编辑:
组件:
1 2 3 4 5 6 7 8 9 10 | <label text ="{{getData }}"></label> getObjectData() { return this._http.get('/page/emp.json') .map((response :Response) => response.json()); } |
之后,我不知道如何解析json并在此结构的listview中打印出来。我提到了一些视频和杂货店应用程序。但是我仍然无法获得结果,我对arrayname Employee非常困惑。
我只需要从列表视图中的响应中打印
这应该起作用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <ListView [items]="employees" row="1"> <template let-item="item"> <Label [text]="item.name"></Label> </template> </ListView> // Create Employee Class: export class Employee { constructor(public id: string, public name: string) {} } // Your component: this.employees: Array<Employee> = []; ngOnInit() { this.globalReader.getObjectData() .subscribe(data => { this.employees = data.Employee.map(item => new Employee(item.id, item.name); }); }); } // The getObjectData method of *globalReader* service: getObjectData() { return this._http.get('/page/emp.json') .map((response :Response) => response.json().data); } |
根据http调用返回的对象,可能不需要.data:
1 2 3 4 | getObjectData() { return this._http.get('/page/emp.json') .map((response :Response) => response.json()); } |
您需要映射数据而不是Strigify数据
1 2 | this.globalReader.getObjectData() .subscribe(data => this.getData = data.employee.map(e => e.name)) |
您可以通过以下方式获得它:
1 2 3 4 5 6 7 8 | <ListView [items]="getData"> <template let-item="item"> <StackLayout> <Label [text]='"ID:" + item.id'></Label> <Label [text]='"Name:" + item.name'></Label> </StackLayout> </template> </ListView> |