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

EduardoAndiaRomero
October 7, 2024
193 views
2 votes
3 Answers

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": "[email protected]",
    "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": "[email protected]"
    }
  }
}

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

Answers

- NarenMurali
- October 7, 2024 at 9:22 am
- 0 votes
0
Try accessing the value of mainObjeto, since it contains the properties that you want to iterate. I am also using json pipe to view the contents of complex objects.

To use the json pipe in HTML, make sure you import either CommonModule or JsonPipe to the imports array of the standalone component or module.
```
<div class="bank" *ngFor="let item of list">
  <p *ngFor="let itemAux of item.mainObjeto | keyvalue">
    Key: <b>{{itemAux.key}},</b> value: <b> {{itemAux.value | json}} |</b>
  </p>
</div>
```
Login or Signup to reply.

You need to flatten the nested object structure before displaying it. This can be done in your component by extracting the relevant fields.

    objs: any; // To hold the fetched data
      displayData: any[] = []; // To hold flattened data for display

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

flattenData(data: any) {
    this.displayData = [{
      id: data.id,
      descripcion: data.descripcion,
      reclamoMotivoNombre: data.reclamoMotivo.nombre,
      empresaNombre: data.empresa.nombreEmpresa,
      fechaCreacion: new Date(data.fechaCreacion).toLocaleString(),
      correoCliente: data.correoCliente,
      reclamoEstadoNombre: data.reclamoEstado.reclamoEstadoMaestro.nombreEstado,
      commentSupport: data.reclamoEstado.commentSupport
    }];}

Now, create a grid to display the flattened data. You can use a simple table for this:

    <table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Descripción</th>
      <th>Motivo</th>
      <th>Empresa</th>
      <th>Fecha de Creación</th>
      <th>Correo Cliente</th>
      <th>Estado</th>
      <th>Comentario Soporte</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of displayData">
      <td>{{ item.id }}</td>
      <td>{{ item.descripcion }}</td>
      <td>{{ item.reclamoMotivoNombre }}</td>
      <td>{{ item.empresaNombre }}</td>
      <td>{{ item.fechaCreacion }}</td>
      <td>{{ item.correoCliente }}</td>
      <td>{{ item.reclamoEstadoNombre }}</td>
      <td>{{ item.commentSupport }}</td>
    </tr>
  </tbody>
</table>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers