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

Question

Ts

this.myservice.online_service('online_service',data).subscribe(res=>{
        this.result = res;

        this.bus_data=this.result.searchResult;
    })

Html

<ion-card  *ngFor= "let bus of bus_data ; let i = index" [attr.data-target]="'#viewseat' + i" (click)="get_seats(i)">
        <ion-card-header>
            <ion-row>
                <ion-col col-6 class="p0 bus_name">{{bus.operatorName}}</ion-col>
 </ion-row>
</ion-card-header>
 </ion-card>

service.ts

online_service(url,data = null )
{

this.show_loader();
return this.http.post(this.webservice_url+ url,  JSON.stringify(data)).map(res=>res.json())
}

The code works well if server returns multiple data .But getting this error in case server return single data

Sajeetharan · Accepted Answer · 2019-03-21 04:53:02Z

1

Which means you need to always use array to bind with ngFor. you could create a local variable and declare it as an array and then push the result.

myResult : any = [];

and then,

this.myservice.online_service('online_service',data).subscribe(res=>{
        this.result = res;
        myResult.push(this.result.searchResult);
})

answered Mar 21, 2019 at 4:53

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Sajeetharan Over a year ago

Also use myResult with ngFor

Dulanjaya Tennekoon · Accepted Answer · 2019-03-21 05:07:09Z

1

You need to push them to the array as follows.

In your component.ts define the array like this.

bus_data: any[] = [];

Now, inside your data loading function,

this.myservice.online_service('online_service',data).subscribe(res=>{
   this.result = res;
   this.bus_data=[...this.result.searchResult];
})

answered Mar 21, 2019 at 5:07

Dulanjaya Tennekoon

2,5181 gold badge20 silver badges33 bronze badges

1 Comment

Kevin Jose Over a year ago

Now it displays in case of single data , and shows empty in case of multiple data.

<ion-content class="background" *ngIf="bus_data" [ngClass]="lang=='ar' ? 'ar' : ''">     <ion-card  *ngFor= "let bus of bus_data ; let i = index" [attr.data-target]="'#viewseat' + i" (click)="get_seats(i)">         <ion-card-header>             <ion-row>                 <ion-col col-6 class="p0 bus_name">{{bus.operatorName}}</ion-col>

. Same bus_data[] declared as array

Kevin Jose · Accepted Answer · 2019-03-21 06:24:50Z

0

Thank a lot for your answers. Appreciate your efforts. I forget to check array type of data that come from server.Now it works perfectly

Let me post the right answer

this.myservice.online_service('online_service',data).subscribe(res=>{
      this.result = res;

      this.bus_data=this.result;
 if (this.bus_data.code === '1') {
    if (this.bus_data.searchResult instanceof Array !== true) {
       this.bus_data.searchResult = new Array(this.bus_data.searchResult);
   }}
   console.log(this.bus_data);
  })

answered Mar 21, 2019 at 6:24

Kevin Jose

8728 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

Ts

Html

service.ts

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Ts

Html

service.ts

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related