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

Question

I have a service the fetches keywords and I use ngFor to display these keywords as tags. But I am getting this above error

here is the code

<ion-content>
  <ion-searchbar [(ngModel)]="myInput" [showCancelButton]="shouldShowCancel" (ionInput)="onInput($event)" (ionCancel)="onCancel($event)">
  </ion-searchbar>
  <ion-card *ngIf="suggest">
    <ion-card-header>
      Suggestions
    </ion-card-header>
    <ion-card-content>
      <ion-badge *ngFor="let item of keyword;" > {{item.keyword}}</ion-badge>
    </ion-card-content>

this is where i call the search service when

onInput(event) {
    this.suggest = true;
    this.keywords = this.logins.getkeywords(this.myInput).subscribe((data) => this.keywords = data)


  }

and here is the service

getkeywords(item:string):any

{
   return  this.http.get('/mobile/term).map((res:Response)=>res.json())

}

here is the server response

[{"keyword":"asd"},{"keyword":"aptitude"},{"keyword":"arrangements"},{"keyword":"averages"},{"keyword":"aadasda"},{"keyword":"asdasd"},{"keyword":"anesthesiology"},{"keyword":"asds"}]

mohit thakur mohit thakur · Accepted Answer · 2017-08-25T08:57:51

I got the solution , it was caused were i called by service.

onInput(event) {
    this.suggest = true;
    this.keywords = this.logins.getkeywords(this.myInput).subscribe((data) => this.keywords = data)


  }

here i assign data to keywords in 2 places once when i receive data and once when i call the service so it was getting data correctly and then again assigned the subscriber object to it which caused error.

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

1 Answers