Как отобразить вложенный JSON в угловых 5+ ...?

Question

Я использую сторонний API.который предоставляет вложенный объект JSON взамен.В угловых 7 я использовал http получить запрос для получения данных.Данные хорошо выглядят в консоли.Но не связывается с HTML.

Я использую угловой 7

ngOnInit(){
this._dataservice.getdata().subscribe(res => {
  this.cricdata = res;
  console.log(this.cricdata);
})

}

Это данные JSON

Answer 1

Если бы данные JSON были массивом, мы могли бы использовать обычный синтаксис * ngFor, что-то вроде:

<div *ngFor="let cric of cricdata">{{cric.id}}</div>

Но похоже, что ваши данные имеют форму объекта, который снова содержит объекты, поэтому мы не имеем дело с массивами здесь. К счастью, у Angular есть канал для этого, называемый KeyValuePipe. Я полагаю, что этот подход может помочь вам:

<div *ngFor="let cric of cricdata | keyvalue">{{cric.key}}:
  <div *ngFor="let subItem of cric.value | keyvalue">
    {{subItem.key}}: {{subItem.value}}
  </div>
</div>

Документация для KeyValuePipe: https://angular.io/api/common/KeyValuePipe

Answer 2

Это то, что вы хотите, но сначала начните читать Angular Docs

<div>
{{cricdata | json}}
</div>

<div>
{{cricdata?.22374?.id}}
</div>

<div>
{{cricdata?.22374?.timeForNextDay}}
</div>

Лучший способ - преобразовать данные отклика вашего объекта в массив, а затем использовать цикл for для визуализации данных.

Пример

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])
      });
    });

  }

}

и затем используйте цикл for

<div *ngFor="let item of bucket;">
  {{item?.id}}
</div>