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

Question

I am studying angular and decided to make a very simple movie search. I would like to put the elements of the film on the screen, but the return of my get has been an Object. I have broken my head to try to make it display. After reading a lot, I saw that the ngfor cannot display the elements. Can someone tell me some way to convert the Object to array. It could be one or the other solution of how to get the elements of this Object and display on the screen.

film-placehold.component.ts

import { Film } from './../models/films';
import { FilmsService } from './../services/films.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-film-placehold',
  templateUrl: './film-placehold.component.html',
  styleUrls: ['./film-placehold.component.css']
})
export class FilmPlaceholdComponent implements OnInit {


  constructor(
    private serviceFilms: FilmsService
  ) { }

  ngOnInit() {
    this.getFilms();
  }

  getFilms(){
    this.serviceFilms.getFilmsService().subscribe(
      (data) => {
        //console.log(data);
        this.serviceFilms.filmes = data //as Film[]
        console.log(this.serviceFilms.filmes)
      }
    )
  }

}

film.service.ts

import { Film } from './../models/films';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {Observable} from "rxjs";

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


  url='https://www.omdbapi.com/?s=x-men&apikey=e03a9ac8'; 

  constructor(
    private httpClient:HttpClient
  ) { }

  httpOptions = {
    headers: new HttpHeaders({'Content-Type':'application/json'})
  }

  filmes:Film[]

  getFilmsService(): Observable<any>{
    return this.httpClient.get(this.url)
  }

  getSearchFilmeService(movieName){
    return this.httpClient.get<Film[]>(`https://www.omdbapi.com/?s=${movieName}&apikey=e03a9ac8`)
  }
  
}

filmplacehold.html

<div class="box">
  <div class="container">
    <li *ngFor="let filme of serviceFilms.filmes">
        {{filme.Title}}
    </li>
  </div>
</div>

Answer 1

In this example on ngFor is accessing serviceFilmsRender.filmes, but I believe that Response is something like serviceFilmsRender.Results, on the.log console it is possible to identify the returned structure.

 constructor(
 public serviceFilmsRender;
) { }

getFilms(){
 this.serviceFilms.getFilmsService().subscribe((data: Array<Object>) => {
   console.log(data);
   this.serviceFilmsRender = data;
 });
}

<div class="box">
  <div class="container">
 <li *ngFor="let filme of serviceFilmsRender.filmes">
    {{filme.Title}}
 </li>
  </div>
</div>

}

Answer 2

First you’re missing the variable, you’re doing the ngFor for a service type variable (serviceFilms), would have to create a variable in the component to store the return of the service and work on it. Second, by url past, the return is a objeto containing the attribute Search and which in turn has a array of objects with information about the movies inside. Soon you would have to access the property to be able to go through the array:

TS:

 import { Film } from './../models/films';
 import { FilmsService } from './../services/films.service';
 import { Component, OnInit } from '@angular/core';

 @Component({
   selector: 'app-film-placehold',
   templateUrl: './film-placehold.component.html',
   styleUrls: ['./film-placehold.component.css']
 })
export class FilmPlaceholdComponent implements OnInit {
  public films: Film[];

  constructor(private serviceFilms: FilmsService) { }

  ngOnInit() {
     this.getFilms();
  }

  getFilms(){
     this.serviceFilms.getFilmsService().subscribe(data => {
        this.films = data["Search"];  // acessa a propriedade Search
        console.log(filmes);  // deverá exibir um array de objetos com os filmes 
     })
  }

}

HTML

<div class="box">
  <div class="container">
    <li *ngFor="let filme of films">
      {{ filme.Title }} - {{ filme.Type }} - {{ filme.Year }}
    </li>
  </div>
</div>