Display nested Json in Angular component

Question

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.

Try directly with {{obcategory.name}} and remove the 3rd nested *ngFor. — stud3nt
– stud3nt, Commented Dec 26, 2019 at 9:56
hi, your code is good enough you just use {{nestedobcategory.value.name}} instead of {{nestedobcategory.value}} — Tonmoy Nandy
– Tonmoy Nandy, Commented Dec 26, 2019 at 10:01

Prashant Pimpale · Accepted Answer · 2019-12-26 10:49:31Z

3

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

edited Dec 26, 2019 at 10:49

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Dec 26, 2019 at 9:56

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

2 Comments

vandu Over a year ago

I was breaking my head till now. Thanks a lot your solution works like a charm.

Adrita Sharma Over a year ago

You are welcome. Just a tip, if you see something is not printing, try with {{nestedobcategory.value | json}} you will get a clear picture of what is happening. And kindly upvote if you don't mind :)

Prashant Pimpale · Accepted Answer · 2019-12-26 10:40:38Z

2

Change:

{{ nestedobcategory.value }}

To:

{{ nestedobcategory.value.name }}

Code after changes:

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

Working Demo

edited Dec 26, 2019 at 10:40

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Dec 26, 2019 at 9:57

Chanaka Weerasinghe

5,8002 gold badges31 silver badges42 bronze badges

Comments

Prashant Pimpale · Accepted Answer · 2019-12-26 10:43:27Z

1

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.

edited Dec 26, 2019 at 10:43

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Dec 26, 2019 at 10:00

Passionate Coder

7,3042 gold badges24 silver badges50 bronze badges

Collectives™ on Stack Overflow

Display nested Json in Angular component

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related