how to get a particular object value from nested json array

Question

CategoryComponent.html:57 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'Samsung'. NgFor only supports binding to Iterables such as Arrays. I can only display the product array rest it is not working with this code

This is the error I am getting in the console

 <mat-accordion multi="true"  *ngFor="let item1 of products">
      <mat-expansion-panel  *ngFor="let item2 of item1.childcat">
        <mat-expansion-panel-header *ngFor="let item3 of item2.subcat">
          {{item2.name}}{{ item3.name}}
        </mat-expansion-panel-header>
        <p>HAlo</p>
      </mat-expansion-panel>
    </mat-accordion> <!-- filter-group  .// -->

My Component

 this.route.queryParams.subscribe(params => {
 this.categoryService.getProduct().subscribe(products => this.products = products) 

Service file

 getProduct(): Observable<Product[]>{
let params_url = new HttpParams().set('fil_outlet',this.name);
console.log('new my ss--',this.name);
return this.http.get<Product[]>("http://localhost:4500/products",{params:params_url});

};

JSON

[
{
    "id": 1,
    "name": "A7",
    "childcatId": "1",
    "subcatId": "1",
    "price": 18000,
    "mrp": 21000,
    "discription": "sfhshsfhsf",
    "image": "http://bestjquery.com/tutorial/product-grid/demo3/images/img-7.jpeg",
    "createdAt": "2019-11-13T00:00:00.000Z",
    "updatedAt": "2019-11-14T02:00:00.000Z",
    "childcat": {
        "id": 1,
        "name": "samsung",
        "categoryId": "1",
        "subcatId": "1",
        "createdAt": "2019-11-21T00:00:00.000Z",
        "updatedAt": "2019-11-21T00:00:00.000Z",
        "subcat": {
            "id": 1,
            "name": "Mobile",
            "categoryId": "1",
            "createdAt": "2019-11-19T00:00:00.000Z",
            "updatedAt": "2019-11-05T00:00:00.000Z",
            "filter_groups": [
                {
                    "id": 1,
                    "name": "Ram",
                    "subcatId": "1",
                    "createdAt": "2019-11-13T00:00:00.000Z",
                    "updatedAt": "2019-11-13T00:00:00.000Z",
                    "filters": [
                        {
                            "id": 1,
                            "name": "2 GB",
                            "filterGroupId": "1",
                            "productId": "1",
                            "createdAt": "2019-11-19T00:00:00.000Z",
                            "updatedAt": "2019-11-27T00:00:00.000Z"
                        }
                    ]
                },
                {
                    "id": 2,
                    "name": "Internal Storage",
                    "subcatId": "1",
                    "createdAt": "2019-11-05T00:00:00.000Z",
                    "updatedAt": "2019-11-24T00:00:00.000Z",
                    "filters": [
                        {
                            "id": 2,
                            "name": "8 GB",
                            "filterGroupId": "2",
                            "productId": "1",
                            "createdAt": "2019-11-20T00:00:00.000Z",
                            "updatedAt": "2019-11-20T00:00:00.000Z"
                        }
                    ]
                }
            ]
        }
    }
}

]

Answer 1

You are attempting to call an *ngFor on objects, not arrays. What you do instead is simply call the items themselves. See the following code.

 <mat-accordion multi="true">
      <mat-expansion-panel  *ngFor="let item1 of products">
        <mat-expansion-panel-header>
          {{item1.childcat.name}}{{ item1.childcat.subcat.name}}
        </mat-expansion-panel-header>
        <p>HAlo</p>
      </mat-expansion-panel>
    </mat-accordion> <!-- filter-group  .// -->

If you have the potential to have a null childcat, then you can modify the code slightly with an ngIf.

<mat-accordion multi="true">
  <mat-expansion-panel  *ngFor="let item1 of arrObject">
    <mat-expansion-panel-header>
      <p *ngIf="item1.childcat">{{item1.childcat.name}}{{ item1.childcat.subcat.name}}</p>
    </mat-expansion-panel-header>
    <p>HAlo</p>
  </mat-expansion-panel>
</mat-accordion> <!-- filter-group  .// -->

You don't necessarily have to use a p tag for this but just some sort of wrapper that uses the if. Keep in mind that if the subcat within your childcat has the potential to be null you will have to do a check for that as well. (Not shown)