Как я могу получить данные, используя Angular 8 из API, который возвращает объект JSON

Question

Закончен импорт HttpClientModule , а также его регистрация в модуле приложения. Однако, когда я делаю запрос от API, я получаю сообщение об ошибке в консоли:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Ниже мой app.service.ts

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http'
import {mydata} from './app'
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class AppService {


  private url:string="https://allsportsapi.com/api/football/?&met=Videos&eventId=76387&APIkey=e09665167a2ccf5f2c7d15527c78d5d209eff826dea5b4dd0bdbc65b258be8de";


  constructor(private http : HttpClient) { }

  getData():Observable<mydata[]>
  {
    return this.http.get<mydata[]>(this.url);
  }


}
**Below is the code for the app.component.ts**
import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})





export class AppComponent  implements OnInit{
  title = 'movie';
  info:any[];
  constructor(private service:AppService){}
  ngOnInit()
  {
      this.service.getData().subscribe(data=>{this.info = data})
  }
}
**Below is the app.component.html**

<h1>Welcome To {{title}} stream</h1>
<table>
  <td *ngFor="let video of info ">

    <tr>{{video.result[0] | json}}</tr>
    <tr>{{video.result[1] | json}}</tr>
  </td>
</table>

**This is my interface**
export interface mydata
{
  success:number,
  result:string[]
}
**This is what the api returns**
{
  "success": 1,
  "result": [
    {
      "video_title": "Goal - 1:0 - 12'\n Poli A., Bologna",
      "video_url": "https://cc.sporttube.com/embed/leMCCCG/no-preload"
    },
    {
      "video_title": "Goal - 1:1 - 38'\n Babacar K., Sassuolo",
      "video_url": "https://cc.sporttube.com/embed/TeMCCCG/no-preload"
    },
    {
      "video_title": "Yellow Card - 86'\n Goldaniga E., Sassuolo",
      "video_url": "https://cc.sporttube.com/embed/EeMCCCG/no-preload"
    },
    {
      "video_title": "Goal - 2:1 - 88'\n Pulgar E., Bologna",
      "video_url": "https://cc.sporttube.com/embed/FeMCCCG/no-preload"
    },
    {
      "video_title": "Highlights",
      "video_url": "https://streamable.com/e/0d35p"
    }
  ]
}

Answer 1

Похоже, ваш API возвращает объект, но вы ожидаете массив. Попробуйте немного изменить свой запрос:

  getData(): Observable<MyData[]> {
    return this.http.get<{ result: MyData[] }>(this.url).pipe(
      map(response => response.result)
    );
  }

Answer 2

Если ваш API возвращает object вместо array и вы хотите l oop через объект , вы можете использовать keyvalue pipe.

Преобразования Объект или Карта в массив пар ключ-значение.

@Component({
  template: `<div *ngFor="let item of data | keyvalue">
      {{item.key}} - {{item.value}}
    </div>`
})
export class MyComponent {
  data = { "key": "value", "key2": "value2" };
}

Answer 3

Попробуйте использовать его следующим образом

<table>
  <td *ngFor="let video of info.result ">

    <tr>{{video.video_title}}</tr>
    <tr>{{video.video_url}}</tr>
  </td>
</table>

Или

сохранить data.result в this.info

 ngOnInit()
  {
      this.service.getData().subscribe(data=>{this.info = data.result})
  }

и

<tr>{{video.video_title | json}}</tr>
<tr>{{video.video_url | json}}</tr>

Answer 4

Я рекомендую вам создать интерфейс .TS, соответствующий вашему ответу API JSON.

Затем обновите ваш метод this.service.getData(), чтобы он получал массив вашего ранее созданного интерфейса .TS.

Наконец, обновите info:any[]; до info:YourInterface[];