How to display json data from api in tabular form? - angularjs

Question

I am new to angular.I am trying to consume the data from api https://api.covid19india.org/travel_history.json. How to print the data from above api json data in tabular form? Is there any changes required? When the angular application is served the travel_history is to be in tabular form.
Here is the Component.ts
import { Component } from "#angular/core";
import { coronaApi } from "../service/service";
import { HttpErrorResponse } from "#angular/common/http";
#Component({
selector:'corona',
templateUrl:'./component.html'
})
export class CoronaComponent{
public result:Array<any>;
constructor(public service:coronaApi){}
ngOnInit(){
this.service.getData().subscribe((posRes)=>{
this.result=(posRes);
},(errRes:HttpErrorResponse)=>{
console.log(errRes)
})
}
}
Here is the component.html.
<table border="2">
<thead>
<tr>
<th colspan="11"> Travel History </th>
</tr>
<tr>
<th>_CN6CA</th>
<th>Accuracy Location</th>
<th>Address</th>
<th>Datasource</th>
<th>Latlong</th>
<th>Mode of Travel</th>
<th>Pid</th>
<th>Place Name</th>
<th>Time From</th>
<th>Time to</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let x of result";*ngFor = " let y of x ">
<td>{{y._cn6ca}}</td>
<td>{{y.accuracylocation}}</td>
<td>{{y.address}}</td>
<td>{{y.datasource}}</td>
<td>{{y.latlong}}</td>
<td>{{y.modeoftravel}}</td>
<td>{{y.pid}}</td>
<td>{{y.placename}}</td>
<td>{{y.timefrom}}</td>
<td>{{y.timeto}}</td>
<td>{{y.type}}</td>
</tr>
</tbody>
</table>

Answer 1

Hope this will work. While you are subscribing to getData() function you should use second loop.
this.result = response.travel_history;
Here are the component.ts
import { Component } from "#angular/core";
import { coronaApi } from "../service/service";
import { HttpErrorResponse } from "#angular/common/http";
#Component({
selector:'corona',
templateUrl:'./component.html'
})
export class CoronaComponent{
public result:Array<any>;
constructor(public service:coronaApi){}
ngOnInit(){
this.service.getData().subscribe((posRes)=>{
this.result=posRes.travel_history;
},(errRes:HttpErrorResponse)=>{
console.log(errRes)
})
}
}
Here are component.html
<tbody>
<tr *ngFor="let y of result">
<td>{{y._cn6ca}}</td>
<td>{{y.accuracylocation}}</td>
<td>{{y.address}}</td>
<td>{{y.datasource}}</td>
<td>{{y.latlong}}</td>
<td>{{y.modeoftravel}}</td>
<td>{{y.pid}}</td>
<td>{{y.placename}}</td>
<td>{{y.timefrom}}</td>
<td>{{y.timeto}}</td>
<td>{{y.type}}</td>
</tr>
</tbody>

Answer 2

On your ts file you add a boolean and display the data after the response. You don't need second loop just set
this.result = response.travel_history;
ts
isDataLoaded: boolean = false;
public result;
ngOnInit(){
this.service.getData().subscribe(response => {
this.result = response.travel_history;
this.isDataLoaded = true;
});
}
html
<tbody *ngIf="isDataLoaded">
<tr *ngFor="let x of result">
<td>{{x._cn6ca}}</td>
<td>{{x.accuracylocation}}</td>
<td>{{x.address}}</td>
<td>{{x.datasource}}</td>
<td>{{x.latlong}}</td>
<td>{{x.modeoftravel}}</td>
<td>{{x.pid}}</td>
<td>{{x.placename}}</td>
<td>{{x.timefrom}}</td>
<td>{{x.timeto}}</td>
<td>{{x.type}}</td>
</tr>
</tbody>