Issue
I have an array as below;
var publicArray={
"settings": [{
"id": "1",
"deleted": "0",
"data": [{
"title": " Business Unit",
"value": "B1"
},
{
"title": "Comp ",
"value": "C1"
},
{
"title": " Pa Id",
"value": "P1"
}, {
"title": " NPI",
"value": "4535"
}
]
}, {
"id": "2",
"deleted": "0",
"data": [{
"title": " Business Unit",
"value": "B2"
},
{
"title": "Comp ",
"value": "C2"
},
{
"title": " Pa Id",
"value": "P2"
}, {
"title": " NPI",
"value": "34242"
}
]
}]
};
the array comes actually from database so it may extend to more.so that more rows would come as the array grows.
and I need to populate a html table using this array as follow image.i am new to this please help me to do this
Solution
Having component's property called publicArray
you can you can achive that by writing the following template:
<table *ngIf="publicArray?.settings?.length && publicArray.settings[0].data?.length">
<tr>
<th>ID</th>
<th *ngFor="let header of publicArray.settings[0].data">{{ header.title }}</th>
</tr>
<tr *ngFor="let row of publicArray.settings">
<td>{{ row.id }}</td>
<td *ngFor="let col of row.data">
{{ col.value }}
</td>
</tr>
</table>
Answered By - yurzui
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.