get values from nested object and display in a grid on angular 17

I have this JSON:

{
"mainObjeto": {
"id": 1,
"descripcion": "some text",
"reclamoMotivo": {
"id": 3,
"nombre": "yyyyy",
"descripcion": "Producto con Defectos"
},
"empresa": {
"id": 1,
"nombreEmpresa": "xxxx",
"descripcionEmpresa": "xxxx"
},
"adjuntos": [
{
"id": 1,
"nombreAdjunto": "test.txt"
},
{
"id": 2,
"nombreAdjunto": "prueba.jpeg"
}
],
"fechaCreacion": "2024-10-06T18:22:55.202+00:00",
"correoCliente": "cleinte@mail.com",
"reclamoEstado": {
"id": 1,
"reclamoEstadoMaestro": {
"id": 2,
"nombreEstado": "EN_REVISION",
"descripcion": "En revisión"
},
"commentSupport": "falla sistema",
"updatedAt": "2024-10-06T18:22:55.315+00:00",
"correoAsesor": "cleinte@mail.com"
}
}
}


I need to populate the values in a grid using angular, for testing purposes I tried to get the data with:

<div class="bank" *ngFor="let item of list">
<p *ngFor="let itemAux of item | keyvalue">
Key: <b>{{itemAux.key}},</b> value: <b> {{itemAux.value}} |</b>
</p>
</div>


this is my ts code:

ngOnInit(): void {
this.service.getData()
.subscribe( data => { this.objs = data });
}


but I get this value: Key: mainObjeto, value: [object Object]

Please your help

Continue reading...