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

Question

I am pretty new with Angular and I stuck with problem building up my portfolio project. The problem is with receiving list of (nested) objects like this:

    "$id": "1",
    "data": {
        "$id": "2",
        "$values": [
            {
                "$id": "3",
                "id": 1,
                "name": "producto",
                "shortDescription": "prod11111",
                "longDescription": "lorem ipsum bla bla",
                "category": "1",
                "price": 50.00,
                "stockLevel": 10,
                "orderDetails": {
                    "$id": "4",
                    "$values": []
                }
            },
            {
                "$id": "5",
                "id": 2,
                "name": "segundo",
                "shortDescription": "prod222",
                "longDescription": "lorem ipsum",
                "category": "2",
                "price": 30.00,
                "stockLevel": 20,
                "orderDetails": {
                    "$id": "6",
                    "$values": []
                }
            }
        ]
    },
    "error": null
}

This is my app.component.ts:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'Shop';
  products: any[] = [];
  
  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('https://localhost:5001/api/products').subscribe((response: any) => {
      this.products = response.data;
    }, error => {
      console.log(error);
    });
  }
}

This is app.component.html:

<app-nav-bar></app-nav-bar>

<div class="container" style="margin-top: 140px;">
    <h1>Welcome to {{title}}!</h1>
    <ul>  
        <li class="list-unstyled" *ngFor="let product of products">
            {{product.name}}
        </li>
    </ul>
</div>

I looked thru StackOverflow for similar problems but cannot resolve this in my case. I think that there is problem because of arrays of arrays or nested objects.

Any help is appreciated!

response.data is not an array. I think you want response.data.$values. so do this.products = response.data.$values; — BizzyBob
– BizzyBob, Commented Sep 4, 2022 at 11:46
@BizzyBob How did you know so fast the correct answer? What gives that '$values'? Huge thanks! — luca88
– luca88, Commented Sep 4, 2022 at 13:01

Yong Shun · Accepted Answer · 2022-09-04 11:47:01Z

2

The response.data is not an array. Instead, I believe that response.data.$values is what you need for the products array.

this.http.get('https://localhost:5001/api/products').subscribe((response: any) => {
  this.products = response.data.$values;
}, error => {
  console.log(error);
});

answered Sep 4, 2022 at 11:47

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

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

1 Comment

luca88 Over a year ago

Wow, unbelievable, how did you know so fast the correct answer? What gives that '$values'? Big thanks!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related