CODEWITHSUNDEEP
javascriptangular
vandu
vandu

Reputation: 196

Display nested Json in Angular component

I am new to angular. I am trying to display Json object in component. I am using keyvalue pipe with *ngFor to achieve this.

My Json Object 

{
  "categories": [
    {
      "categories": {
        "id": 1,
        "name": "Delivery"
      }
    },
    {
      "categories": {
        "id": 2,
        "name": "Dine-out"
      }
    },
    {
      "categories": {
        "id": 3,
        "name": "Nightlife"
      }
    },
    {
      "categories": {
        "id": 4,
        "name": "Catching-up"
      }
    },
    {
      "categories": {
        "id": 5,
        "name": "Takeaway"
      }
    }
  ]
}

My Component HTML:

<div *ngFor="let obcategories of users | keyvalue">
    <div *ngFor="let obcategory of obcategories.value | keyvalue">
        <div *ngFor="let nestedobcategory of obcategory.value | keyvalue">
            {{nestedobcategory.value}}
        </div>
    </div>
</div>

It is displaying all both id value and name value. I want to display only name value.

Any help is much appreciated.

Upvotes: 2

Views: 2542

Answers (3)

Adrita Sharma
Adrita Sharma

Reputation: 22213

You can use {{nestedobcategory.value.name}} to access the name property:

<div *ngFor="let obcategories of users | keyvalue">
    <div *ngFor="let obcategory of obcategories.value | keyvalue">
        <div *ngFor="let nestedobcategory of obcategory.value | keyvalue">
            {{nestedobcategory.value.name}}
        </div>
    </div>
</div>

Working Demo

Upvotes: 3

Passionate Coder
Passionate Coder

Reputation: 7294

A minor change would be:

nestedobcategory.value => nestedobcategory.value.name

IMP : In such cases use JsonPipe just to check what object you getting. If you use 

{{ nestedobcategory.value | json }}

It will display your objects in the JSON Structure (Key/Value pair) and then you can access values that you want to display on the HTML.

Upvotes: 1

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

Change:

{{ nestedobcategory.value }}

To:

{{ nestedobcategory.value.name }}

Code after changes:

<div *ngFor="let nestedobcategory of obcategory.value | keyvalue">
      {{ nestedobcategory.value.name }}
</div>

Working Demo

Upvotes: 2

Related Questions