title: Angular 6 : Error trying to diff '[object Object]'. Only arrays and iterables are allowed
body: <p>I would like to display data returned from api in my front end using angular 6</p>
  
  <p>here is what I have done : but data are not shoiwng up :</p>
  
  <p>component.htm: </p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
  &lt;div class="panel-heading"&gt;
  &lt;h3 class="panel-title"&gt;Popular Movies&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="panel-body"&gt;
  &lt;div class="row"&gt;
      &lt;div *ngFor="let movie of movies; let i=index" class="col-md-2"&gt;
          &lt;div *ngIf="i &lt; 6"&gt;
          &lt;img *ngIf="movie.poster_path" class="thumbnail" src="http://image.tmdb.org/t/p/w500/{{movie.poster_path}}"&gt;
          &lt;h4&gt;{{movie.title}}&lt;/h4&gt;
          &lt;p&gt;{{movie.release_date}}&lt;/p&gt;
  
          &lt;p&gt;&lt;a class="btn btn-default" routerLink="/movie/{{movie.id}}"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>component.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Http } from '@angular/http';
  import { Location } from '@angular/common';
  import { MoviesService } from '../movies.service';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-movies',
    templateUrl: './movies.component.html',
    styleUrls: ['./movies.component.scss']
  })
  export class MoviesComponent implements OnInit {
     movies: any;
  
   constructor(private router: ActivatedRoute, private http: Http, private location: Location, private moviesService: MoviesService) {
        this.movies = [];
    }
  
    ngOnInit() {
      this.router.params.subscribe((params) =&gt; {
        const id = params['id'];
        this.moviesService.getMovies(id)
        .then(movies =&gt; {
            console.log(movies);
            this.movies = this.movies;
          });
     });
    }
  }
  </code></pre>
  
  <p>service.ts:</p>
  
  <pre><code>    import { Injectable } from '@angular/core';
  import { Headers, Http, Response } from '@angular/http';
  import {Jsonp} from '@angular/http';
  
  @Injectable({
    providedIn: 'root'
  })
  export class MoviesService {
  
    private apiUrl = 'http://localhost:8000/movies';
    constructor(private http: Http, private _jsonp: Jsonp) { }
    getMovies(id: string): Promise&lt;any&gt; {
        return this.http.get(this.apiUrl)
                   .toPromise()
                   .then(this.handleData)
                   .catch(this.handleError);
    }
    private handleData(res: any) {
      const body = res.json();
      console.log(body); // for development purposes only
      return body.result || body || { };
  }
   private handleError(error: any): Promise&lt;any&gt; {
       console.error('An error occurred', error); // for development purposes only
       return Promise.reject(error.message || error);
   }
  }
  </code></pre>
  
  <p>when i run my app I get the followig error:</p>
  
  <pre><code>MoviesComponent.html:19 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
  </code></pre>
  
  <p>what is wrong with my code?  angular 6 alot of changes :(  any help will be apreciated, thanks.</p>
  
  <p>Movies structure:</p>
  
  <pre><code>{page: 1, total_results: 365014, total_pages: 18251, results: [,…]}
  page
  :
  1
  results
  :
  [,…]
  0
  :
  {vote_count: 595, id: 351286, video: false, vote_average: 6.7, title: "Jurassic World: Fallen Kingdom",…}
  1
  :
  {vote_count: 2250, id: 383498, video: false, vote_average: 7.7, title: "Deadpool 2",…}
  2
  :
  {vote_count: 4857, id: 299536, video: false, vote_average: 8.4, title: "Avengers: Infinity War",…}
  3
  :
  {vote_count: 35, id: 525102, video: false, vote_average: 3.4, title: "Girl Lost",…}
  4
  :
  {vote_count: 6792, id: 284053, video: false, vote_average: 7.4, title: "Thor: Ragnarok",…}
  5
  :
  {vote_count: 11073, id: 135397, video: false, vote_average: 6.5, title: "Jurassic World",…}
  6
  :
  {vote_count: 1628, id: 338970, video: false, vote_average: 6.2, title: "Tomb Raider",…}
  7
  :
  {vote_count: 917, id: 348350, video: false, vote_average: 6.8, title: "Solo: A Star Wars Story",…}
  8
  :
  {vote_count: 9056, id: 297762, video: false, vote_average: 7.2, title: "Wonder Woman",…}
  9
  :
  {vote_count: 6148, id: 284054, video: false, vote_average: 7.3, title: "Black Panther",…}
  10
  :
  {vote_count: 157, id: 402900, video: false, vote_average: 6.8, title: "Ocean's 8",…}
  11
  :
  {vote_count: 13447, id: 118340, video: false, vote_average: 7.9, title: "Guardians of the Galaxy",…}
  12
  :
  {vote_count: 39, id: 260513, video: false, vote_average: 6.9, title: "Incredibles 2",…}
  13
  :
  {vote_count: 2070, id: 337167, video: false, vote_average: 6, title: "Fifty Shades Freed",…}
  14
  :
  {vote_count: 641, id: 449176, video: false, vote_average: 8.3, title: "Love, Simon",…}
  15
  :
  {vote_count: 9272, id: 10195, video: false, vote_average: 6.7, title: "Thor", popularity: 63.826664,…}
  16
  :
  {vote_count: 0, id: 482560, video: false, vote_average: 0, title: "Covet: The Island of Desire",…}
  17
  :
  {vote_count: 5720, id: 181808, video: false, vote_average: 7.1, title: "Star Wars: The Last Jedi",…}
  18
  :
  {vote_count: 849, id: 268896, video: false, vote_average: 5.9, title: "Pacific Rim: Uprising",…}
  19
  :
  {vote_count: 4733, id: 141052, video: false, vote_average: 6.3, title: "Justice League",…}
  total_pages
  :
  18251
  total_results
  :
  365014
  </code></pre>