Question 110942 in 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

how show the value of an specific key in a nested array of json in the html using angular?

i’m new using angular trying to create a simple crud, my problem is that i consume a api from an spring boot server and there i have 3 tables related to each other, but my problem is that when i try to put the information from the table users in a table using angular, i had the next result:

Problem

the fields of the form that have the foreign key values are returned from springboot as a json because the tables "Empresa" and "Roles" has their own models, my code in the component.html is:

<h2>Lista Usuarios</h2>
<table class="table table-striped">
    <thead class="table-dark">
        <tr>
            <th>Cedula</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>clave</th>
            <th>email</th>
            <th>Empresa</th>
            <th>NIT</th>
            <th>Rol</th>
            <th>Estado</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let usuario of usuarios">
            <td>{{usuario.cedula}}</td>
            <td>{{usuario.primernombre}}</td>
            <td>{{usuario.primerapellido}}</td>
            <td>{{usuario.clave}}</td>
            <td>{{usuario.email}}</td>
            <td>{{usuario.nitempresa| json}}</td>
            <td>{{usuario.nitempresa | json}}</td>
            <td>{{usuario.rol | json}}</td>
            <td>{{usuario.estado | json}}</td>
        </tr>
    </tbody>
</table>

Note: if i dont use the | json, the table only shows Object object

My best attempt to solve this problem were using this code:

<h2>Lista Usuarios</h2>
<table class="table table-striped">
    <thead class="table-dark">
        <tr>
            <th>Cedula</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>clave</th>
            <th>email</th>
            <th>Empresa</th>
            <th>NIT</th>
            <th>Rol</th>
            <th>Estado</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let usuario of usuarios">
            <td>{{usuario.cedula}}</td>
            <td>{{usuario.primernombre}}</td>
            <td>{{usuario.primerapellido}}</td>
            <td>{{usuario.clave}}</td>
            <td>{{usuario.email}}</td>
            <td *ngFor="let empresa of usuario.nitempresa | keyvalue">{{empresa.value}}</td>
            <td>{{usuario.nitempresa | json}}</td>
            <td>{{usuario.rol | json}}</td>
            <td>{{usuario.estado | json}}</td>
        </tr>
    </tbody>
</table>

It’s good but i’m trying to get specific values not all of them, this code results in this:

Best attempt to solve the problem

i can’t select which key value show in the table.

hope you can help me guys if this is something you need to know the complete users petition that springboot sends is this:

[{"cedula":"111111111","primernombre":"Natalia","segundonombre":"","primerapellido":"Romero","segundoapellido":"Garces","clave":"romerito","email":"[email protected]","nitempresa":{"nit":"800100375","nombre":"Red de Servicios del Cauca","estado":1},"rol":{"id":4,"rol":"coordinador","estado":1},"estado":0},{"cedula":"1193534149","primernombre":"Brayan","segundonombre":"","primerapellido":"Hinestroza","segundoapellido":"Perez","clave":"aaa","email":"[email protected]","nitempresa":{"nit":"1234567890","nombre":"Estrategias Empresariales","estado":1},"rol":{"id":1,"rol":"adminsys","estado":1},"estado":1},{"cedula":"222222222","primernombre":"Andres","segundonombre":"Alberto","primerapellido":"Torres","segundoapellido":"Herrera","clave":"albertico","email":"[email protected]","nitempresa":{"nit":"1234567890","nombre":"Estrategias Empresariales","estado":1},"rol":{"id":1,"rol":"adminsys","estado":1},"estado":1},{"cedula":"94474101","primernombre":"Kevin","segundonombre":"Alexis","primerapellido":"Gallego","segundoapellido":"Albarracin","clave":"password","email":"[email protected]","nitempresa":{"nit":"900697200","nombre":"Comercializadora de servicios del Atlántico","estado":1},"rol":{"id":7,"rol":"gerente","estado":1},"estado":1}]

note how when you reach the "nit" and "rol" key it opens a whole new json, hope you can help me, sorry if i commit any mistake writing this, not my main language 🙂

Tags:

2

Answers


  1. 0

    As far as I can tell from your data, you just need to access the nested properties as follows:

    <tr *ngFor="let usuario of usuarios">
    <td>{{usuario.cedula}}</td>
    <td>{{usuario.primernombre}}</td>
    <td>{{usuario.primerapellido}}</td>
    <td>{{usuario.clave}}</td>
    <td>{{usuario.email}}</td>
    <td>{{usuario.nitempresa.nombre}}</td>
    <td>{{usuario.nitempresa.nit}}</td>
    <td>{{usuario.rol.rol}}</td>
    <td>{{usuario.estado}}</td>
</tr>
    Login or Signup to reply.
  2. 0

    You can use custom pipes to solve the problems you encounter
    If you want to parse a json string

        str = '{"name":"xxx","age":12}';

    <div>{{str|jsonExplain}}</div>


    import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'jsonExplain'
})
export class JsonExplainPipe implements PipeTransform {

  transform(value: any, ...args: unknown[]): unknown {
    const strObj = JSON.parse(value);
    return strObj.name;
  }

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search