I'm currently developing a project in Angular 8 that involves utilizing an API with a JSON Array. Here is a snippet of the data:
"success":true,
"data":{
"summary":{
"total":606,
"confirmedCasesIndian":563,
"confirmedCasesForeign":43,
"discharged":43,
"deaths":10,
"confirmedButLocationUnidentified":0
},
"regional":[
{
"loc":"Andhra Pradesh",
"confirmedCasesIndian":9,
"confirmedCasesForeign":0,
"discharged":1,
"deaths":0
},
{
"loc":"Bihar",
"confirmedCasesIndian":4,
"confirmedCasesForeign":0,
"discharged":0,
"deaths":1
},
{
"loc":"Chhattisgarh",
"confirmedCasesIndian":1,
"confirmedCasesForeign":0,
"discharged":0,
"deaths":0
},
{
"loc":"Delhi",
"confirmedCasesIndian":30,
"confirmedCasesForeign":1,
"discharged":6,
"deaths":1
}
]
},
"lastRefreshed":"2020-03-26T04:18:02.528Z",
"lastOriginUpdate":"2020-03-25T13:15:00.000Z"
}
component.ts
constructor(private _IndiaApiService: IndiaApiService) { }
info:IndiaClass[]
regional:[];
ngOnInit() {
this._IndiaApiService.getIndiaData()
.subscribe
(
data=>
{
this.info = data;
}
)
}
component.html
<table border=1>
<tr>
<th>State</th>
<th>Recovered cases</th>
</tr>
<div *ngFor="let item of info.data.regional">
<tr>
<td>{{ item.loc }}</td>
<td>{{ item.discharged }}</td>
</tr>
</div>
</table>
The code above displays a table with data from the first element of the array, but now I need to iterate through all 25 elements using *ngFor directive. How can I achieve this efficiently? Any alternative methods are also welcome. Thank you.