How to display the information of a subobject using ngfor

Question

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 information should be displayed 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. 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)

The question is : How could I show only some items of the object and not all the content

Thanks!!

Answer 1

You can filter out the items to display using something like this:

<table>
 <tr *ngFor="let item of listItems">
 <td><div>{{ item.id }}</div></td>                               
 <td><div>{{ item.arg}}</div></td>
 <td><div>{{ item.date }}</div></td>
 <ng-container *ngFor="let key of item.User | keyvalue ">
  <td *ngIf="isInteresting(key.value)">{{ key.value }}</td>
 </ng-container>

 <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.Sport | keyvalue"><div>{{kv.value}}</div></td>                         

</tr>  
</table>

and in the component:

isInteresting(val): boolean { return typeof val !== 'object'; }