Render object of objects in Angular

user_14505291 0
Viewed 1018

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: 'name1@gmail.com' },
      1: { name: 'name2', email: 'name2@gmail.com' },
      2: { name: 'name3', email: 'name3@gmail.com' }
    }

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?

ngfor angular render object javascript
2 Answers
user_57062930

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

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