Tengo una matriz de objetos que parece
\[ {id: 1, name: 'first', properties: \[{id: 1, name: 'propName1'}, {id: 2, name: 'propName2'}\]}, {id: 2, name: 'second', properties: \[{id: 1, name: 'propName1'}, {id: 2, name: 'propName2'}\]}, {id: 3, name: 'third', properties: \[{id: 1, name: 'propName1'}, {id: 2, name: 'propName2'}\]}, \]Quiero mostrar el nombre del objeto, por ejemplo, 'primero' y luego quiero mostrar los nombres de los objetos de propiedades propName1, propName2, así que quiero ver
primero
propNombre1 propNombre2
segundo
propNombre1 propNombre2
tercera
propNombre1 propNombre2
¿Podrían ayudarme, chicos?
Lo intenté
{filters.map((filter) => { let propss = ArrayFrom(filter.properties); propss.map((prop) => ( <div>{prop.displayName}</div> )) return( <div className={style.title}>{filter.displayName}</div> ) filter.properties.map((prop) => { return ( <> <div className={style.title}>{filter.displayName}</div> <div>{prop.displayName}</div> </> ); }); })}e intenté guardar la matriz a través de reducir, pero sin ningún resultado
En primer lugar, no debe nombrar su matriz 'filtro' ya que esto puede confundirse con el método Array.prototype.filter;)
Luego, tiene una matriz de objetos que contienen matrices, por lo que debe iterar en los dos niveles (en caso de que su estructura real tenga más profundidad, probablemente necesite adoptar un enfoque recursivo).
teniendo en cuenta su punto de entrada:
const data = [ { id: 1, name: 'first', properties: [ {id: 1, name: 'propName1'}, {id: 2, name: 'propName2'} ] }, { id: 2, name: 'second', properties: [ {id: 1, name: 'propName1'}, {id: 2, name: 'propName2'} ] }, { id: 3, name: 'third', properties: [ {id: 1, name: 'propName1'}, {id: 2, name: 'propName2'} ] }, ]las dos iteraciones pueden verse así:
return data.map(entry => ( <> <div className={style.title}>{entry.name}</div> {entry.properties.map(prop => ( <div>{prop.name}</div> ))} <> ))