Render object of objects in Angular

Question

How I could render an object of objects in Angular but without turn it in an array or anything similar. The reason for this is that I have a large object of objects and I would like to avoid to many iterations from object to an array after that to loop the array in the html.

For example I have:

    persons: any = {
      0: { name: 'name1', email: '[email protected]' },
      1: { name: 'name2', email: '[email protected]' },
      2: { name: 'name3', email: '[email protected]' }
    }

When I do is the following:

    <div *ngFor="let person of persons | keyvalue">
      <p>
      {{ person.key }} / {{ person.value }}
      </p>
    </div>

The result is:

    0 / [object Object]
    1 / [object Object]
    2 / [object Object]

I tried to loop one more time thru the person.value:

    <div *ngFor="let person of persons | keyvalue;">
      <p>
      {{ person.key }}
      <span *ngFor="let item of person.value | keyvalue"></span>
      </p>
    </div>

but this causing an error ("No overload matches this call.").

Could anyone tell me how could I achieve this?

eko · Accepted Answer · 2021-09-21 14:54:28Z

5

You can just use the json pipe

example:

{{persons | json}}

Documentation: https://angular.io/api/common/JsonPipe

Stackblitz example

answered Sep 21, 2021 at 14:54

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

2 Comments

Atanas Ivanov Over a year ago

I don't need exactly this but the example that you provided in the comment of Jeremy Thille is working and it is exactly what I tried to do. I tried with {{ person.value.name }} but the correct way was {{ person.value['name'] }}. Thank you.

eko Over a year ago

Glad I could help :-)

Jeremy Thille · Accepted Answer · 2021-09-21 14:57:45Z

2

The keyvalue pipe transforms 0: { name: 'name1', email: '[email protected]' } into { key : 0, value : { name: 'name1', email: '[email protected]' }}. So you should be able to do :

<div *ngFor="let person of persons | keyvalue">
   <p>
      {{ person.value.name}} / {{ person.value.email }}
   </p>
</div>

answered Sep 21, 2021 at 14:57

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

3 Comments

eko Over a year ago

stackblitz.com/edit/…

Atanas Ivanov Over a year ago

I already tried this but forgot to mention it. The result is an error.

Atanas Ivanov Over a year ago

In the example that eko provided it is working: <p>{{ person.value['name'] }} / {{ person.value['email'] }}</p> Thanks

Collectives™ on Stack Overflow

Render object of objects in Angular

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related