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

You can directly access the properties of mainObjeto and its nested objects.

import { Component, OnInit } from '@angular/core';
import { YourService } from './your.service'; // Adjust the import according to your service path

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  objs: any; // Define the type according to your data structure

  constructor(private service: YourService) {}

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

In your HTML template, you can access the nested properties directly

    <div *ngIf="objs">
  <h3>Main Object Details</h3>
  <table>
    <tr>
      <th>ID</th>
      <th>Descripcion</th>
      <th>Motivo</th>
      <th>Empresa</th>
      <th>Fecha Creación</th>
      <th>Correo Cliente</th>
      <th>Estado</th>
    </tr>
    <tr>
      <td>{{ objs.mainObjeto.id }}</td>
      <td>{{ objs.mainObjeto.descripcion }}</td>
      <td>{{ objs.mainObjeto.reclamoMotivo.nombre }}</td>
      <td>{{ objs.mainObjeto.empresa.nombreEmpresa }}</td>
      <td>{{ objs.mainObjeto.fechaCreacion | date:'short' }}</td>
      <td>{{ objs.mainObjeto.correoCliente }}</td>
      <td>{{ objs.mainObjeto.reclamoEstado.reclamoEstadoMaestro.nombreEstado }}</td>
    </tr>
  </table>

  <h3>Adjuntos</h3>
  <ul>
    <li *ngFor="let adjunto of objs.mainObjeto.adjuntos">
      {{ adjunto.nombreAdjunto }}
    </li>
  </ul>
</div>