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

Question

.html

 <ion-select-option value="t.result[i].id" *ngFor="let t of (issueTypes$ | async); let i = index ">
            {{t.result[i].name}}
 </ion-select-option>

.ts

this.issueTypes$ = this.maintenanceService.get();

postman:

{
    "result": [
        {
            "id": "KT5c6wdb8ecd94e",
            "name": "Need Batteries"
        },
        {
            "id": "RT5c6aa12600134",
            "name": "A/C Not working"
        }
    ]
}

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3161) at checkAndUpdateDirectiveInline (core.js:22004) at checkAndUpdateNodeInline (core.js:23265) at checkAndUpdateNode (core.js:23227) at debugCheckAndUpdateNode (core.js:23861) at debugCheckDirectivesFn (core.js:23821) at Object.eval [as updateDirectives] (MaintenancePage.html:19) at Object.debugUpdateDirectives [as updateDirectives] (core.js:23813) at checkAndUpdateView (core.js:23209) at callViewAction (core.js:23450)

Can you tell me the issue here?

You probably meant result on the returned type: let t of (issueTypes$ | async)?.result; let i = index — Igor
– Igor, Commented Mar 5, 2019 at 17:05

Igor · Accepted Answer · 2019-03-05 17:06:22Z

2

Based on your json model from postman you should iterate over the result property which is the array in the returned model.

*ngFor="let t of (issueTypes$ | async)?.result; let i = index"

Then inside the containing html can access t directly which contains the object from the array. The index variable i is also no longer necessary.

{{t.name}}

answered Mar 5, 2019 at 17:06

Igor

62.5k10 gold badges111 silver badges181 bronze badges

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

1 Comment

Sampath Over a year ago

Wow... really nice. Thanks.

Jon · Accepted Answer · 2019-03-05 17:09:14Z

0

The problem is that you are trying to iterate over the result object. You need to go a level deeper. So change your code to below:

<ion-select-option value="t.id" *ngFor="let t of (issueTypes$ | async)?.result; let i = index ">
            {{t.name}}
 </ion-select-option>

edited Mar 5, 2019 at 17:09

answered Mar 5, 2019 at 17:05

Jon

2,71123 silver badges28 bronze badges

2 Comments

Igor Over a year ago

As issueTypes$ is the observable/promise that resolves the .result should be called on it after it resolves. (issueTypes$ | async)?.result

Jon Over a year ago

Good point. Honestly I wouldn't go about making ajax calls this way, but I'll update my answer.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related