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

Answer 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 ie this.utilities = [];

Answer 2

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.