Angular - Error: Cannot find a differ supporting Object '[Object Object]' of type 'Object'. Ngfor only Supports Binding to Iterables such as Arrays

Asked

Viewed 190 times

-1

Error: Cannot find a differ supporting Object '[Object Object]' of type 'Object'. Ngfor only Supports Binding to Iterables such as Arrays.

I have this Javascript backend that is running on port 3000 and I am trying to request a list of movies and their properties, but I am getting this error above.

HTML file

<div class="movies-container text-center">
  <div class="movies-table-list" *ngFor="let movie of movies">
    <div class="banner-movie">
      {{ movie.title }}
    </div>
  </div>
</div>

Component.

import { Component, OnInit } from '@angular/core';
import { take } from 'rxjs/operators';

import { Movies } from './../movies.interface';
import { SmartService } from './../smart.service';

@Component({
  selector: 'app-movies',
  templateUrl: './movies.component.html',
  styleUrls: ['./movies.component.scss']
})
export class MoviesComponent implements OnInit {

  movies: Movies[];

  constructor(
    private smartService: SmartService
  ) { }

  ngOnInit(): void {
    this.getMoviesList();
  }

  getMoviesList() {
    this.smartService.getMovies()
    .pipe(
      take(1)
    )
    .subscribe(
      response => this.onSucess(response),
      error => this.onError(error)
    );
  }

  onSucess(response: Movies[]) {
    this.movies = response;
  }

  onError(error: any) {
    console.log('Erro ao carregar os filmes');
  }

}

service ts.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Movies } from './movies.interface';

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

  baseUrl = 'http://localhost:3000';

  constructor(
  private http: HttpClient
  ) { }

  getMovies() {
    return this.http.get<Movies []>(this.baseUrl + '/filmes?page=1');
  }

}

interface ts.

export interface Movies {
  id: number;
  poster_path: string;
  title: string;
  overview: string;
  original_language: string;
}

API doc

{
"page": 1,
"results": [
{
"adult": false,
"backdrop_path": "https://image.tmdb.org/t/p/original/pcDc2WJAYGJTTvRSEIpRZwM3Ola.jpg",
"genre_ids": [
28,
12,
14,
878
],
"id": 791373,
"original_language": "en",
"original_title": "Zack Snyder's Justice League",
"overview": "Determinado a garantir que o sacrifício final do Superman não foi em vão, Bruce Wayne alinha forças com Diana Prince com planos de recrutar uma equipe de metahumanos para proteger o mundo de uma ameaça de proporções catastróficas que se aproxima.",
"popularity": 11783.352,
"poster_path": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/v9XwEXYWpxt2rpkmFBiQ1zeyKUy.jpg",
"release_date": "2021-03-18",
"title": "Liga da Justiça de Zack Snyder",
"video": false,
"vote_average": 8.7,
"vote_count": 3389
},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{}
],
"total_pages": 500,
"total_results": 10000
}

Does anyone know what it could be?

javascript angular api front-end http

  • tries to initialize it as empty array Movies: Movies[]=[]

  • received this error now: ERROR Error: Error trying to diff '[Object Object]'. Only arrays and iterables are allowed

  • I added part of the api structure to the question!

  • I think in this case it would be this.Movies = Sponse result.;

  • I tried this way and says that "Property 'Results' does not exist on type Movies[]".

  • Did you have to change the interface.ts somehow?

Show 1 more comment

1 answer

0

The problem ai is that you are iterating on an object and not on an array. To solve this you should put

this.movies = response.results;

However its interface does not exist this Results to circumvent that Voce could do it in this line. It will work because the Response is of type any.

.subscribe(
  response => this.onSucess(response.results),
  error => this.onError(error)
);

Browser other questions tagged javascript angular api front-end http

You are not signed in. Login or sign up in order to post.