2

Tengo unos datos estructurados de la siguiente forma:

datos = 
  [
    {0:
      'carlos','1':
      [
        {
          'id': 112,
          'fecha': '20/08/11'
        },
        {
          'id': 113,
          'fecha': '20/08/11'
        }
      ]
    },
    {1:
      'jose','2':
      [
        {
          'id': 114,
          'fecha': '20/09/11'
        }
      ]
    }
  ]

Estoy intentando recorrer en el html estos datos, estoy intentando mostrar los datos id y fecha, pero no se muy bien como hacerlo, he estado intentando esto:

<div *ngFor ="let item of datos | keyvalue"  >
  {{item.key}}  {{item.value}}
</div>

Pero me devuelve esto:

0 [object Object]
1 [object Object]

Que obviamente está mal, cómo podría recorrer los datos hasta llegar a mostrar la información. Agradezco si alguien me podría ayudar o guiar.

1 respuesta 1

0

Una forma de iterarlos es creando una función para obtener la clave de una posición determinada. para obtener el valor carlos sería Object.keys(obj)[0];

La función tiene el tipo any, pero sería bueno extraer esto en una interface.

public getKeyByPosition(obj: any,position=0): any{
    return Object.keys(obj)[position];
}

La vista podría quedar así.

<div *ngFor="let item of datos;index as i">
    <p>{{item[getKeyByPosition(item)]}}</p>
    <p *ngFor="let dataItem of item[getKeyByPosition(item,1)]"  >
      {{dataItem.id}} {{dataItem.fecha}}
    </p>

DEMO ONLINE

1
  • Gracias por tu respuesta amigo, una pregunta, cómo puedo hacer para mostrar las dos key, por ejemplo tengo 'carlos','1' ,` 'jose','2'`, con tu respuesta se muestra actualmente carlos y jose, pero en caso de que necesite mostrar las otras key que son 1 y 2 cómo podría hacer? Gracias!
    – pusux
    el 13 nov. 2021 a las 16:06

Tu Respuesta

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

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