CODEWITHSUNDEEP
jsonangularhttpdata-bindingnested
Sam
Sam

Reputation: 108

How to Display nested JSON in angular 5+ ...?

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 the JSON Data

Upvotes: 0

Views: 6094

Answers (2)

SnorreDan
SnorreDan

Reputation: 2890

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

Upvotes: 1

user6600549
user6600549

Reputation:

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>

Upvotes: 2

Related Questions