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?
You can just use the json pipe
example:
{{persons | json}}
Documentation: https://angular.io/api/common/JsonPipe
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>