Angular 12 - Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

Question

I'm getting a lot of data from an external API, I want to implement it in my html, but every time I try to do a *ngFor with the data, it ends up going wrong, Could someone tell me how to solve this??

 --------HTML-----------

<ng-container *ngFor="let movie of filme">
<mat-card class="mat-card" fxFlex="0 1 calc(33.3% - 11px)"
fxFlex.lt-md="0 1 calc(50% - 11px)"
fxFlex.lt-sm="100%">
  <mat-card-header >
  <mat-card-title class="mat-card-title">
    <div>
      <p>{{movie}}</p>
    </div>
  </mat-card-title>
  </mat-card-header>
</mat-card>
</ng-container>

---------TYPESCRIPT------

  filme:any[];;

 imgUrl: string;
 titleImg: string;

  constructor(private filmes: BuscarFilmesService) {
      this.filmes.filmes().subscribe(res=>this.filme=res);
  }

 -------SERVICE----

  filmes(): Observable<Filmes[]> {
    return this.htpp.get<Filmes[]>(`${this.API_Url}/discover/movie?sort_by=popularity.desc&api_key=${this.API_key}&language=pt-BR`);
  }

Please show the log of res on subscription to service; it's probably an object containing an array of objects. — Misha Mashina
– Misha Mashina, Commented Mar 19, 2022 at 5:11

skouch2022 · Accepted Answer · 2022-03-19 05:20:31Z

1

Your code fragments look right. My guess is that res in the subscription return an object instead of an array.

I would first try and see if the res is actually an array by doing this:

constructor(private filmes: BuscarFilmesService) {

   this.filmes.filmes().subscribe(res =>
   {   
       this.filme = res;
       console.log(this.filme);
   });
}

If it does return an array. Then you can try narrow it down by using simple div with the *ngFor just in case there are some errors with the HTML.

<div *ngFor="let movie of filme">
  {{movie}}
</div>

answered Mar 19, 2022 at 5:20

skouch2022

1,1791 gold badge6 silver badges17 bronze badges

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

2 Comments

pedroramal Over a year ago

I tried to do it the way you told me, but now another problem has appeared, now it's giving this error here: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

skouch2022 Over a year ago

There were 2 different ways that I suggested. Were you able to do the first one and see the print out in the console?

Collectives™ on Stack Overflow

Angular 12 - Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related