Angular 5. I can't display nested json object in *ngFor

Question

I have problem with display all products from a given category in HTML template. When the page loads it shows me this problem in the chrome console:

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

My service:

    getCategoriesById(id) {
    return this.http.get<Categories[]>('http://localhost:61085/api/Categories/GetCategoriesById/' + id);
  }

My component:

 export class CategoriesDetailsComponent implements OnInit {
  listCategories:  Categories[] = [];
  constructor(private activatedRoute: ActivatedRoute, private productService: CategoriesProductsService) { }

  ngOnInit() {
    this.displayProductsByCategoryId();
  }
  displayProductsByCategoryId() {
    const id = +this.activatedRoute.snapshot.params['id'];
    this.productService.getCategoriesById(id).subscribe((data) => {
      this.listCategories = data;
      console.log(this.listCategories);
    });
}
}

HTML template:

    <div class="row">
<div class="col-sm-4" style="cursor: pointer;" *ngFor="let categories of listCategories " [routerLink]="['/products-details', categories.Id]" >
  <div *ngFor="let product of categories.Product">
    <h3 style="text-align: center">Product Name: {{product.Product.Name}}</h3>
  <img class="img-fluid" src="{{product.Product.Image}}">
  <p style="color: yellow">Price: {{product.Product.Price}}PLN</p>
</div>
</div>

Models class Categories and Product:

 export class Categories {
  Id: number;
  Name: string;
  Product: Products;
}

export class Products {
  Id: number;
  Name: string;
  Description: string;
  DetailedDescription: string;
  Price: string;
  IsNewProduct: boolean;
  PromotionalProduct: boolean;
  Image: string;
  CategoryId: number;
}

Any help or suggestion is welcome.

Possible duplicate of [Angular: Cannot find a differ supporting object '\[object Object\]'](https://stackoverflow.com/questions/35660306/angular-cannot-find-a-differ-supporting-object-object-object) — ConnorsFan, Jan 21 '19 at 16:06
When I pass `listCategories: Categories[] = [];` to array I have still the same error — kamil, Jan 21 '19 at 16:17
Can you share how you are defining the service `this.productService.getCategoriesById(id)`, it seems to be returning an object than array. — Aragorn, Jan 21 '19 at 16:18
@Aragorn cancel that again. listCategories is definitely undefined since the first render doesn't wait for ngOnInit and for sure doesn't wait for the http request callback. — malifa, Jan 21 '19 at 16:19

score 0 · Answer 1 · answered Jan 21 '19 at 16:38

0

The problem is here

 export class Categories {
  Id: number;
  Name: string;
  Product: Products[]; // this needs to be an array
}

answered Jan 21 '19 at 16:38

Fredy Adriano Jimenez Martinez

340
2
8

when I changed the code I have error: `Identifier 'Name' and 'Price' is not defined. Array does not contain such a member` – kamil Jan 21 '19 at 16:45
you need to do another `*ngFor='let product of categories.Product'` to display products – Fredy Adriano Jimenez Martinez Jan 21 '19 at 16:48
I added new `*ngFor` but in Chrome console I have still the same error: `ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed` – kamil Jan 21 '19 at 16:58

score 0 · Accepted Answer · answered Jan 21 '19 at 17:15

0

The response you are getting from the API is a particular category. And that category has a property Products which is an array, you can use *ngFor for Products array and not for a single category.

answered Jan 21 '19 at 17:15

Prashanth S.

410
4
19

Angular 5. I can't display nested json object in *ngFor

2 Answers2