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

Question

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

U click the URL will show u what I got in Network there. But I got nothing in apps there.. — Yuyang He
– Yuyang He, Commented Jul 19, 2017 at 6:21

Pengyy · Accepted Answer · 2017-07-19 06:42:42Z

1

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).

edited Jul 19, 2017 at 6:42

answered Jul 19, 2017 at 6:27

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yuyang He Over a year ago

THANK YOU SO MUCH!!!! This problem waste me one day ald..zzz But still dun know why just add '.data' at that place

Yuyang He Over a year ago

看了资料才知道自己人哈哈哈加下微信吧大神交流一下

Pengyy Over a year ago

@YuyangHe 大神算不上略有研究。

Sachila Ranawaka · Accepted Answer · 2017-07-19 06:03:56Z

0

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; 
    });
  }

answered Jul 19, 2017 at 6:03

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

4 Comments

Yuyang He Over a year ago

news.ts file subscribe got problem said 'property 'subcribe' does not exit on type promise<any>....'

Sachila Ranawaka Over a year ago

should be subscribe not subcribe

Yuyang He Over a year ago

wrong type.. I wrote subscribe, but still this error

Sachila Ranawaka Over a year ago

make sure to use json filter to render objects in DOM {{item | json}}

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related