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


#1

This my provider people-service.ts

import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

/*
Generated class for the PeopleServiceProvider provider.

See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class PeopleServiceProvider {
data: any;

constructor(public http: Http) {
console.log(‘Hello PeopleServiceProvider Provider’);
}
load() {
if (this.data) {
// already loaded data
return Promise.resolve(this.data);
}

// don't have the data yet
return new Promise(resolve => {
  // We're using Angular HTTP provider to request the data,
  // then on the response, it'll map the JSON data to a parsed JS object.
  // Next, we process the data and resolve the promise with the new data.
  this.http.get('https://randomuser.me/api/?results=10')
    .map(res => res.json())
    .subscribe(data => {
      // we've got back the raw data, now generate the core schedule data
      // and save the data for later reference
      this.data = data;
      resolve(this.data);
    });
});

}

}

home.ts file

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import {PeopleServiceProvider} from ‘…/…/providers/people-service/people-service’;

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

public people: any;

constructor(public navCtrl: NavController, public peopleService: PeopleServiceProvider) {

this.loadPeople();

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

}

home.html file

<ion-navbar *navbar>

Home

{{person.name.first}} {{person.name.last}}

{{person.email}}


#2

can you show me output of your data retrieve from json object


#3

{
“results”: [
{
“gender”: “female”,
“name”: {
“title”: “miss”,
“first”: “درسا”,
“last”: “مرادی”
},
“location”: {
“street”: “3516 یادگار امام”,
“city”: “آبادان”,
“state”: “سمنان”,
“postcode”: 63254
},
“email”: “درسا.مرادی@example.com”,
“login”: {
“username”: “crazyladybug765”,
“password”: “catch22”,
“salt”: “F0QucqnL”,
“md5”: “45441a378faf35caa10d6d152ada5441”,
“sha1”: “1d24c8d138f7a37c29649300bef1e580c20a990a”,
“sha256”: “98cc678e36538e0cb2aeafced32cbfc754dda5bc9448b1356e6ced053edcbb84”
},
“dob”: “1947-04-04 21:55:42”,
“registered”: “2012-10-14 22:44:31”,
“phone”: “018-72745797”,
“cell”: “0984-399-0213”,
“id”: {
“name”: “”,
“value”: null
},
“picture”: {
“large”: “https://randomuser.me/api/portraits/women/11.jpg”,
“medium”: “https://randomuser.me/api/portraits/med/women/11.jpg”,
“thumbnail”: “https://randomuser.me/api/portraits/thumb/women/11.jpg
},
“nat”: “IR”
}
],
“info”: {
“seed”: “312110d5b5290f07”,
“results”: 1,
“page”: 1,
“version”: “1.1”
}
}


#4

you can not direct assign data to this.people
use can use those data by doing this => this.peple=data['results']
then you can use

{{person.name.first}} {{person.name.last}}
{{person.email}}