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?

Answer 1

You can just use the json pipe

example:

{{persons | json}}

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

Stackblitz example

Answer 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>