How to Access JSON Object contains json in Angular 2 - json

Question

I want to show the data name, age, address in Angular2 DataTable or any other grid view controls in Angular2
[{
"status": 1,
"message": "Records Found",
"data": [{
"id": "1",
"data": {
"name": "Joseph",
"age": "25",
"Address": "Trichy",
}
}, {
"id": "2",
"data": {
"name": "John",
"age": "35",
"Address": "Chennai",
}
}, {
"id": "3",
"data": {
"name": "martin",
"age": "25",
"Address": "Chennai",
}
}]
}];

Answer 1

Considering your question json as response
this.data = response[0].data;
<li *ngFor="let d of data">
{{d?.name}}
{{d?.age}}
{{d?.Address}}
</li>
In case your first array (json ) has multiple objects and then use nested ngFor

Answer 2

Pojo Classes
export class Data {
name: string;
age: string;
Address: string;
}
export class Datum {
id: string;
data: Data;
}
export class RootObject {
status: number;
message: string;
data: Datum[];
}
In Component.ts
export class AbcComponent implements OnInit {
a: any;
rootObj: RootObject = new RootObject();
constructor() { }
ngOnInit() {
this.a = [{
"status": 1,
"message": "Records Found",
"data": [{
"id": "1",
"data": {
"name": "Joseph",
"age": "25",
"Address": "Trichy",
}
}, {
"id": "2",
"data": {
"name": "John",
"age": "35",
"Address": "Chennai",
}
}, {
"id": "3",
"data": {
"name": "martin",
"age": "25",
"Address": "Chennai",
}
}]
}]
this.rootObj = this.a;
console.log(this.rootObj.data[0].data.age)
}
}

Answer 3

In html :-
<table [mfData]="data[0].data" #mf="mfDataTable">
<tbody>
<tr *ngFor="let item of mf.data">
<td>{{item.data.name}}</td>
<td>{{item.data.Address}}</td>
<td>{{item.data.age}}</td>
<td>{{item.city | uppercase}}</td>
</tr>
</tbody>
</table>
In Component.ts :-
`data = [{
"status": 1,
"message": "Records Found",
"data": [{
"id": "1",
"data": {
"name": "Joseph",
"age": "25",
"Address": "Trichy"
}
}, {
"id": "2",
"data": {
"name": "John",
"age": "35",
"Address": "Chennai"
}
}, {
"id": "3",
"data": {
"name": "martin",
"age": "25",
"Address": "Chennai"
}
}]`