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"
                        }
                    ]
                }
            ]
        }
    }
}

]

You're trying to iterate over item1.childcat. And childcat is not an array, but an object. Hence the error. There is a single childcat, why are you trying to iterate on it? Also, why is a method returning an array of products named getProduct(). The proper usage of the suingular and plural forms would make things much easier. Naming your varianble product instead of item1 would make things easier, too. — JB Nizet
– JB Nizet, Commented Dec 3, 2019 at 17:40

Toarn · Accepted Answer · 2019-12-03 19:23:56Z

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)

edited Dec 3, 2019 at 19:23

answered Dec 3, 2019 at 17:44

Toarn

1261 silver badge9 bronze badges

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

2 Comments

Bhavith .V.N Over a year ago

but when i use {{item1.childcat.name}} its showing Cannot read property 'name' of undefined

Toarn Over a year ago

That most likely means the childcat object within your product object is null.

Collectives™ on Stack Overflow

how to get a particular object value from nested json array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related