Cannot find a differ supporting object '[object Object]' of type 'object' , but it's already an array

Question

I have method to get data from back end to array

Here is method

getUtilities(): void {
    // DropdownHelpers.fillDropdownOptions(
    //     this._propertyService.getMarketingInformationUtilityTypes(),
    //     this.utilities
    // );
    this._propertyService.getMarketingInformationUtilityTypes().subscribe(result => {
        this.utilities = result.items;
        console.log(this.utilities);
    });
}

and here is what I see in the console

But when I try to do *ngFor="let utility of utilities"

I got

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

Where is my problem? Data is returning to array

this.utilities maybe undefined before the API call - at that time it's not an array. Add *ngIf before the loop to check if it is an array OR initialize it to an empty array when you define it. — Nicholas K
– Nicholas K, Commented Apr 25, 2020 at 6:57
the initial value is an empty array utilities: any[] = []; @David — Eugene Sukh
– Eugene Sukh, Commented Apr 25, 2020 at 7:05
The console.log comes from edit-property-market..ion.component.ts, but the error message comes from MarketingEditComponent.html. Can you post your HTML and TS for MarketingEditComponent. — Kurt Hamilton
– Kurt Hamilton, Commented Apr 25, 2020 at 7:10

Nicholas K · Accepted Answer · 2020-04-25 06:58:23Z

1

this.utilities maybe undefined before the API call - at that time it's not an array.

Solutions:

Add *ngIf before the loop to check if it is an array in the template.

OR

Initialize it to an empty array when you define it i.e this.utilities = [];

answered Apr 25, 2020 at 6:58

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

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

4 Comments

Eugene Sukh Over a year ago

utilities is loading at ngOnInit(), I call ngFor at the modal show. So it can be null. Maybe the problem in data structure?

Eugene Sukh Over a year ago

utilities: any[] = []; at start of TS file

Eugene Sukh Over a year ago

Or like this utilities: SelectItem[] = [];

Nicholas K Over a year ago

Is is getting redefined somewhere else in your component? Can you share the relevant snippets from the template as well?

XYZ_undefined · Accepted Answer · 2020-04-25 07:51:11Z

0

when you define utilities declare it as

utilities: any; or utilities:any = [];

and in your use *ngIf before you iterate something like

<div *ngIf="utilities"> 
<div *ngFor="let util of utilities">
{{util.OptionDto.name}} {{util.OptionDto.id}} 
</div>
</div>

Nothing new from what they've said earlier. If your still confused provide me a stackblitz.

answered Apr 25, 2020 at 7:51

XYZ_undefined

641 silver badge4 bronze badges

Collectives™ on Stack Overflow

Cannot find a differ supporting object '[object Object]' of type 'object' , but it's already an array

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related