0

estoy intentando hacer una tabla con angular obteniendo los datos de un arreglo que contiene otros arreglos anidados como se muestra en la siguiente imagen:

introducir la descripción de la imagen aquí

Estoy haciendo esta estructura de tabla: introducir la descripción de la imagen aquí

JSON stringify

[{"name":"Estado 1","series":[{"name":"2021-02-23T06:00:00.000Z","value":"2"},{"name":"2021-02-22T06:00:00.000Z","value":"7"},{"name":"2021-02-19T06:00:00.000Z","value":"1"},{"name":"2021-01-22T06:00:00.000Z","value":"1"},{"name":"2021-01-19T06:00:00.000Z","value":"3"},{"name":"2021-01-12T06:00:00.000Z","value":"1"},{"name":"2021-01-06T06:00:00.000Z","value":"3"}]},{"name":"Estado 2","series":[{"value":1},{"value":2},{"value":0},{"value":0},{"value":0},{"value":0},{"value":0}]}]

Y estoy Utilizando un ngFor para recorrer el arreglo y mostrar los datos en una tabla con el siguiente código:

<table>
 <thead>
   <tr>
     <th>Fecha<th>
      <th>Estado 1<th>
       <th>Estado 2<th>
        <th>total<th>
   </tr>
 <thead>
</table>

 <tbody>
<tr *ngFor="let estado1 of Array[0].series; let i = index">
     <td>{{estado1.name | date:'yyyy/MM/dd'}}</td>
     <td>{{estado1.value}}</td>
   <tr *ngFor="let estado2 of Array[1].series; let i = index">
       <td>{{estado2.name | date:'yyyy/MM/dd'}}</td>
       <td>{{estado2.value}}</td>
       <td>{{estado2.value}} + {{estado1.value}} </td>
     </tr>
 </tr>
</tbody>

Cuando ejecuto este código me da error no me muestra la tabla que quiero hacer, disculpen mi ignorancia no se que estoy haciendo mal o cual es la forma de correcta de recorrer con ngFor con arreglos anidados.

2
  • Hola, aprende a dominar los screenshots si estas en windows puedes utilizar windows + shift + s, puedes ver este minitutorial. O puedes descargar lightshot. Si editas la pregunta y mejoras esa foto te podemos ayudar rapidamentem Commented el 20 jul. 2021 a las 17:36
  • Hola gracias, ya la edite
    – Darklawz
    Commented el 20 jul. 2021 a las 18:11

2 respuestas 2

3

Tienes que verlo como una colección de objetos el array "principal" y luego cada objeto en la propiedad series contiene otra lista de objetos.

[
 {
    name: "x",
    series: [{...}, {...}, ....] // el ngFor de dentro itera estos datos
 },
 {
    name: "y",
    series: [{...}, {...}, ....]
 },
] // Array de objetos

He llamado items a la colección de objetos, deberías cambiarla con la variable que tengas en el component.ts.

<table>
 <thead>
  <tr>
    <th>Fecha</th>
    <th>Estado 1</th>
    <th>Estado 2</th>
    <th>Total</th>
  </tr>
 </thead>

<tbody>

   <ng-container *ngFor="let item of items; let i = index">
     <tr *ngFor="let serie of item.series; let j = index">
       <td>{{serie.name | date:'yyyy/MM/dd'}}</td>
       <td>{{serie.value}}</td>
       <td>{{item.series.length}}</td>
     </tr>
   </ng-container>
</tbody>
</table>

He actualizado mi respuesta, para adaptarlo a la imagen de la tabla. La columna (Estado 2) no se que valor debería tener.

7
  • Hola gracias por tu respuesta, la propiedad value esta dentro de name 0: name: "fecha" value: 2
    – Darklawz
    Commented el 20 jul. 2021 a las 15:13
  • ahh ok. Te ha servido?
    – hawks
    Commented el 20 jul. 2021 a las 16:39
  • No me me funciono :(, probé poner <tr *ngFor="let item of items[0].series; let i = index"> con eso si me traer datos pero solo de esa posición
    – Darklawz
    Commented el 20 jul. 2021 a las 16:57
  • es muy raro. Por lo que veo en tu template(html) tienes un <tr> dentro de <tr>. Podria ser por eso?
    – hawks
    Commented el 20 jul. 2021 a las 18:01
  • Arregle el <Tr>, cuando ejecuto <td>{{item.name | date:'yyyy/MM/dd'}}</td> solo me muestra: 'Estado 1', 'Estado 2', entonces no se si poner algo como item.name.name o item[0].name para acceder a las fechas.
    – Darklawz
    Commented el 20 jul. 2021 a las 19:52
2

Te voy a dar una idea, pero es para que la estudies: NOTA: Yo le puse el nombre TableArray a la variable.

<table border="1">
  <tr>
    <td>FECHA</td>
    <td *ngFor="let item of TableArray">{{item.name}}</td>
    <td>TOTAL</td>
  </tr>

  <tr *ngFor="let series of TableArray[0].series; let i = index">
    <td>{{ series.name | date:'yyyy/MM/dd'}}</td>
    <td>{{ series.value }}</td>
    <td>{{ TableArray[1].series[i].value }}</td>
    <td>{{ +series.value + TableArray[1].series[i].value }}</td>
  </tr>
</table>
10
  • Gracias por la respuesta, agregue en la pregunta el tipo de tabla que estoy haciendo
    – Darklawz
    Commented el 21 jul. 2021 a las 1:07
  • Como te dice @hawks es mejor ver los datos, no tanto en la imagen, sino mejor en texto. Has el console.log pero utiliza el JSON. stringify y colocas el texto que te bota, guiate por Esto Commented el 21 jul. 2021 a las 1:38
  • Gracias por el consejo, ya lo puse que bota con JSON.stringify
    – Darklawz
    Commented el 21 jul. 2021 a las 2:13
  • Pero ponlo como texto para poderlo copiar :P, Copia y Pegalo Commented el 21 jul. 2021 a las 2:21
  • ahh perdon xd, ya lo puse xd
    – Darklawz
    Commented el 21 jul. 2021 a las 2:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.