1

tengo un arreglo de objetos con arreglos anidados:

categorias =
  [
    {
      0: 'agosto', 'Manuel': [
        {
          id: 12,
          categoria: 'sociedad',
        },
        {
          id: 13,
          categoria: 'sociedad',
        },
      ],
    },
    {
      1: 'septiembre', 'Carlos': [
        {
          id: 14,
          categoria: 'deportes',
        }
      ],
    },
  ]

Necesito presentar en pantalla lo siguiente:

agosto, Manuel
12 - sociedad
13 - sociedad

septiembre, Carlos
14 - deportes 

Necesito mostrar las dos claves que tengo en cada objeto. Estaba tratando de acceder hasta los datos, pero no consigo hacerlo.

<div *ngFor ="let item of categorias | keyvalue"  >
  {{item.key}}  {{item.value}}
  <p *ngFor="let value of categorias[item.key]">
    {{ value }}
  </p>
</div>

Solo consigo de salida esto:

0 [object Object]
1 [object Object] 

Cómo puedo hacer para mostrar los datos que necesito y ademas de ello si se presiona un botón obtener el valor de cada clave, por ejemplo si necesito mandar agosto y septiembre o Manuel y Carlos como parámetro en una función:

funcion(key1, key2) {
  console.log(Key1, Key2)
}

Que en caso de seleccionar el primer objeto los valores serian:

agosto, Manuel

Espero me puedan ayudar, gracias de antemano.

0

1 respuesta 1

2

Lo recomendable es formatear tu array, a una manera más manejable y evitarte lógica compleja en el HTML, si usas ese formato de data en varios lados, sería bueno usar un pipe, de lo contrario sólo bastaría con crear un método interno para llevar a cabo el formateo.

En tu caso, tienes un array de objetos. Y estos objetos tienen keys que usarás como data también, así que no sólo necesitarás iterar por los elementos, también por las llaves utilizando Object.keys().

Aquí te dejo un ejemplo completo:

formattedCategories = this.categorias.map((item) => {
  let month;
  let name;
  let data;

  Object.keys(item).forEach((entry, index) => {
    // First index is the month
    if (index === 0) {
      month = item[entry];
    }

    // Second index is the name but this time we need the key
    // and also its value gives you the data
    if (index === 1) {
      name = entry;
      data = item[entry];
    }
  });
  return { month, name, data };
});

Creo que el código habla por sí solo, pero de todas maneras lo explico. Aquí necesitaba acceder al índice de cada iteración de las keys, ya que no estaba seguro de si este formato será así siempre y, si lo es, siempre cumplirá que:

  • La primera iteración tendrá el mes (value).
  • La segunda el nombre (key) y el array de categorías (value).

Pero debes tener cuidado, aquí debes entender que las keys de un objeto están ordenadas, por eso es que se puede hacer eso.

Una vez formateado el array de objetos, el acceso sería más intuitivo:

<div *ngFor ="let item of formattedCategories"  >
  {{item.month }}, {{ item.name }} :
  <p *ngFor="let value of item.data">
    {{ value.id }} - {{ value.categoria }}
  </p>
</div>

Aquí te dejo un stackblitz con esta implementación.

1
  • Entendí perfectamente lo que me explicas, y pues así resulta más simple acceder a los datos que necesito. Gracias! el 15 nov. 2021 a las 23:57

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.