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

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 >
    <thead >
        <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 >
    <thead >
        <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 :)

CodePudding user response：

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>

CodePudding user response：

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;
  }

}