How to display data inside object inside json/json using angular

Question

I get this JSON.

[
    {
        "id": 11,
        "parent_category": null,
        "name": "name11"
    },
    {
        "id": 12,
        "parent_category": {
            "id": 11,
            "name": "name11",
            "parent_category": null
        },
        "name": "name12"
    },
    {
        "id": 13,
        "parent_category": {
            "id": 11,
            "name": "name11",
            "parent_category": null
        },
        "name": "name13"
    }  
]

I want to show in view parent_category.name where parent_category is not null.

  <mat-select formControlName="parent_category">
                      <mat-option>--</mat-option>
                      <mat-option *ngFor="let p_g of mydata" [value]="p_g.id">
                        {{p_g.name}}
                      </mat-option>
                    </mat-select>

Please, Can you share with me any idea how to show it ?

Philipp Meissner · Accepted Answer · 2021-05-20 10:01:37Z

1

You need to access internal object parent_category

<mat-option *ngFor="let p_g of mydata" [value]="p_g.id">
      {{p_g.parent_category?.name}}
 </mat-option>

edited May 20, 2021 at 10:01

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

answered May 20, 2021 at 9:55

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Philipp Meissner Over a year ago

This will render an "empty" option, which probably is not what OP wants.

Collectives™ on Stack Overflow

How to display data inside object inside json/json using angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related