Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – 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": "[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

Tags:

3

Answers


  1. 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.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search