CODEWITHSUNDEEP
angularionic-frameworkionic2
Yuyang He
Yuyang He

Reputation: 2272

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

Asking a question in stackoverflow for the first time. My ionic2 app has got an issue. I can get json in console ald, but when I want it show in my apps, news.html got some problem.

providers/news-data.ts

@Injectable()
export class NewsDataProvider {
    data:any;

  constructor(public http: Http) {
  }

  getUsers() {
    if (this.data) {
      return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
      this.http.get('url').map(res => res.json()).subscribe(data => {
          this.data = data;
          resolve(this.data);
          console.log('success');
        });
    });
  }

}

news.ts

@IonicPage()
@Component({
  selector: 'page-news',
  templateUrl: 'news.html',
})
export class NewsPage {
    users:any;
  constructor(public navCtrl: NavController, public navParams: NavParams,public newsData:NewsDataProvider){
    this.getUsers();
  }

  getUsers() {
      this.newsData.getUsers().then(data => {
        this.users = data;
      });
  }

}

news.html

<ion-header>
  <ion-navbar color="danger" no-border-bottom>
    <button ion-button menuToggle>
      <ion-icon name="ios-contact"></ion-icon>
    </button>

    <ion-title></ion-title>

  </ion-navbar>

  <ion-toolbar no-border-top>
    <ion-searchbar color="danger"
                   [(ngModel)]="queryText"
                   (ionInput)="updateSchedule()"
                   placeholder="Search">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>


<ion-content padding>
  <ion-item *ngFor="let user of users">
    {{user.title}}
  </ion-item>
</ion-content>

console show

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.ngOnChanges (common.es5.js:1689) at checkAndUpdateDirectiveInline (core.es5.js:10790) at checkAndUpdateNodeInline (core.es5.js:12216) at checkAndUpdateNode (core.es5.js:12155) at debugCheckAndUpdateNode (core.es5.js:12858) at debugCheckDirectivesFn (core.es5.js:12799) at Object.eval [as updateDirectives] (NewsPage.html:22) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12784) at checkAndUpdateView (core.es5.js:12122) at callViewAction (core.es5.js:12485)

but can get data in Network there ald

Upvotes: 1

Views: 1573

Answers (2)

Pengyy
Pengyy

Reputation: 38161

This error means you are using object on ngFor but ngFor only support iterables such as Array.

I test from the url you provided and find out that you should retrieve from res.json().data which is an array(should be the data you want to be used at ngFor). refer the below change.

this.http.get('http://bravonet.my/ct3/api/news?api_key=123').map(res => res.json().data).subscribe(data => {
  this.data = data;
  resolve(this.data);
  console.log('success');
});

and Plunker Demo(don't confirm this with Chrome because it blocks http request by default when using https).

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41377

you are already subscribing to the http request in the function. no need to create a promise again and return. Just return the http request from the news-data.ts and subscribe to it from news.ts file 

getUsers() {
    if (this.data) {
      return Promise.resolve(this.data);
    }
    return this.http.get('http://bravonet.my/ct3/api/news?api_key=123').map(res => res.json())
}

now catch it like this 

  getUsers() {
      this.newsData.getUsers().subscribe(data => {
      this.users = data; 
    });
  }

Upvotes: 0

Related Questions