I am developing an application with angular and I need to display some data that has the following structure:
{ "id": 33, "arg": 7, "date": "2022-01-31", "User": { "Name": "Cristian", "Group": { "NGroup": "Group 1" } }, "Sport": { "NSport": "Sport 1" } },The idea is to display the information in this way:
id | arg | date | Name (User) | NGroup (Group) | NSport (Sport)
For this I was trying to use keyvalue , the problem with this is that when it brings the User object, it shows me an item called [object Object] that corresponds to group and there is no way to hide it or only select to show only name. This is the current code:
<tbody> <tr *ngFor="let item of listItems"> <td><div>{{ item.id }}</div></td> <td><div>{{ item.arg}}</div></td> <td><div>{{ item.date }}</div></td> <td *ngFor="let key of item.User | keyvalue "><div>{{ key.value }}</div></td> <td *ngFor="let key of item.User | keyvalue"><div *ngFor="let key2 of key.value | keyvalue" >{{ key2.value }}</div></td> <td *ngFor="let kv of item.Sports | keyvalue"><div>{{kv.value}}</div></td> </tr> </tbody>The output of this is:
id | arg | date | [Object,Object] | Name(User) | NGroup (Group) | NSport(sport)
Clearly the keyvalue is displaying everything. Investigating I realized that pipes can be made to show the information in a personalized way and I really don't understand much how it works, that's the reason for this question.
Thanks!!
You can directly enter the data with dot notation without the need for the pipe:
<table> <tbody> <tr *ngFor="let item of listItems"> <td> <div>{{ item.id }}</div> </td> <td> <div>{{ item.arg }}</div> </td> <td> <div>{{ item.date }}</div> </td> <td > <div>{{ item.User.Name}}</div> </td> <td > {{ item.User.Group.NGroup }} </td> <td > {{item.Sport.NSport}} </td> </tr> </tbody> </table>It will give you the following result:
33 7 2022-01-31 Cristian Group 1 Sport 1I leave you a working example here .