Ionic - Cannot find a differ supporting object '[object Object]' of type 'object'

Question

I'm following this tutorial:

http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/

Below you have my system info (you can see I'm using Ionic 3):

$ ionic info

cli packages: (C:\Users\Hatuey\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

local packages:

    @ionic/app-scripts : 2.1.4
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v6.11.2
    npm  : 5.3.0
    OS   : Windows 10

Then, I did the following project:

$ mkdir stackoverflow-question
$ cd stackoverflow-question
$ git clone https://github.com/napolev/stackoverflow-question.git .
$ npm install
$ ionic serve

But I'm getting the following runtime error:

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

as you can see on the following image:

Notice that the data of people is retrieved properly on:

https://github.com/napolev/stackoverflow-question/blob/master/src/pages/home/home.ts#L23

via the service: PeopleService at:

https://github.com/napolev/stackoverflow-question/blob/master/src/providers/people-service/people-service.ts#L31

If I comment out the following line then I don't get any error but of course, that functionality of retrieving users info and display it on the screen is not done.

https://github.com/napolev/stackoverflow-question/blob/master/src/pages/home/home.ts#L19

Probably there is something I need to fix on the content of the file: home.ts, which is:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PeopleService } from '../../providers/people-service/people-service';

@Component( {
    selector: 'page-home',
    templateUrl: 'home.html',
    providers: [PeopleService]
})
export class HomePage {

    public people: any;

    constructor(
        public navCtrl: NavController,
        public peopleService: PeopleService

    ) {
        this.loadPeople();
    }

    loadPeople() {
        this.peopleService.load()
            .then( data => {
                this.people = data;
                console.log( this.people );
            });
    }

}

and here is the content of the file home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="home">
  <ion-list>
    <ion-item *ngFor="let person of people">
      <ion-avatar item-left>
        <img src="{{person.picture.thumbnail}}">
      </ion-avatar>
      <h2>{{person.name.first}} {{person.name.last}}</h2>
      <p>{{person.email}}</p>
    </ion-item>
  </ion-list>
</ion-content>

Any idea on how to solve this error?

Answer 1

You need to set people as data.results. data is an object and not an array.

 this.peopleService.load()
            .then( data => {
                this.people = data.results;//here
                console.log( this.people );
            });

Answer 2

NgFor only supports binding to Iterables such as Arrays. You need to pass an array to this.people object to iterate over it.

Make following changes in your method:

loadPeople() {
    this.peopleService.load()
        .then( data => {
            this.people = data.results;
            console.log( this.people );
        });
}