How can i retrieve data using Angular 8 from an API that return JSON object

Question

Am done importing the HttpClientModule, as well as registering it in the app module. However when i make the request from the API, i get an error in the console:

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

Below is my 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"
    }
  ]
}

Valeriy Katkov · Accepted Answer · 2020-04-21 07:53:45Z

3

Looks like your api returns an object, but you're expecting an array. Try to change you request a little bit:

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

answered Apr 21, 2020 at 7:53

Valeriy Katkov

41.7k27 gold badges110 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user4958970 · Accepted Answer · 2020-04-21 07:54:32Z

0

I will recommend that you create a .TS interface matching your API JSON response.

Then update your method this.service.getData() so that it receives an array of your previously created .TS interface.

Finally, update info:any[]; to info:YourInterface[];

answered Apr 21, 2020 at 7:54

user4958970

Comments

Shlok Nangia · Accepted Answer · 2020-04-21 07:56:27Z

0

Try to use it like this

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

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

Or

store data.result into this.info

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

and

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

answered Apr 21, 2020 at 7:56

Shlok Nangia

2,3773 gold badges19 silver badges25 bronze badges

Comments

Tomislav Stankovic · Accepted Answer · 2020-04-21 08:09:19Z

0

If your API returns object insted of array and you want to loop through an object you can use keyvalue pipe.

Transforms Object or Map into an array of key value pairs.

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

answered Apr 21, 2020 at 8:09

Tomislav Stankovic

3,12417 gold badges38 silver badges43 bronze badges

2 Comments

Waiswa Donnie Over a year ago

I didnt get you so well..Please elaborate more about how i can transform the data

Tomislav Stankovic Over a year ago

@WaiswaDonnie Here you can see an example stackblitz.com/edit/angular6-keyvaluepipe-demo-762uea

Collectives™ on Stack Overflow

How can i retrieve data using Angular 8 from an API that return JSON object

4 Answers 4

Comments

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Related