i am using a third party api. which provides a nested JSON object in return. In angular 7 i have used http get request to get data. The data looks good in console. But does not bind with the HTML.
I am using angular 7
ngOnInit(){
this._dataservice.getdata().subscribe(res => {
this.cricdata = res;
console.log(this.cricdata);
})
}
This is what you want, but first, start to read the Angular Docs
<div>
{{cricdata | json}}
</div>
<div>
{{cricdata?.22374?.id}}
</div>
<div>
{{cricdata?.22374?.timeForNextDay}}
</div>
A better way is to convert your object response data into an array and then use a for loop to render the data.
An example
export class MyComponent implements OnInit {
bucket: any[] = [];
constructor() {}
ngOnInit(){
this._dataservice.getdata().subscribe(res => {
this.cricdata = res;
console.log(this.cricdata);
Object.entries(res.matches).map( res => {
bucket.push(res[1])
});
});
}
}
and then use a for loop
<div *ngFor="let item of bucket;">
{{item?.id}}
</div>
If the JSON data had been an Array we could have used the normal *ngFor syntax, something like:
<div *ngFor="let cric of cricdata">{{cric.id}}</div>
But it looks like your data is in the form of an object that again holds objects, so we are not dealing with Arrays here. Luckily Angular has a pipe for that called the KeyValuePipe. I believe this approach can help you along:
<div *ngFor="let cric of cricdata | keyvalue">{{cric.key}}:
<div *ngFor="let subItem of cric.value | keyvalue">
{{subItem.key}}: {{subItem.value}}
</div>
</div>
Documentation for the KeyValuePipe: https://angular.io/api/common/KeyValuePipe
