Tengo una matriz de objetos como a continuación:
{ name:"Thor", universe:"Marvel", type:"God" }, { name:"Batman", universe:"DC", type:"Human" }, { name:"Iron man", universe:"Marvel", type:"Human" }, ];Ahora, supongamos que quiero representar los objetos de manera que los detalles de tipo Humano estén juntos y los detalles de tipo Dios estén juntos.
Básicamente, quiero mostrar datos basados en la propiedad de tipo como se muestra a continuación:
**Human** name: Batman universe:DC name: Iron man universe:Marvel **God** name: Thor universe: MarvelEspero que el enunciado del problema sea claro. Muchas gracias de antemano.
Puedo ayudarte con la clasificación. Puedes hacer render tu mismo.
const data=[{ name:"Thor", universe:"Marvel", type:"God" }, { name:"Batman", universe:"DC", type:"Human" }, { name:"Iron man", universe:"Marvel", type:"Human" }, ]; const category={}; for(let i of data){ category[i.type]??=[] category[i.type].push(i) }Categoría como:
{ "God":[ { "name":"Thor", "universe":"Marvel", "type":"God" } ], "Human":[ { "name":"Batman", "universe":"DC", "type":"Human" }, { "name":"Iron man", "universe":"Marvel", "type":"Human" } ] }Primero formatearía el tipo de datos a un tipo de datos fácil de usar: vea el ejemplo a continuación:
function App() { const characters = [ { name: "Thor", universe: "Marvel", type: "God", }, { name: "Batman", universe: "DC", type: "Human", }, { name: "Iron man", universe: "Marvel", type: "Human", }, ]; const charactersObj = {}; characters.forEach((character) => { const { type } = character; if (charactersObj[type]) { const currentArray = [...charactersObj[type]]; currentArray.push(character); charactersObj[type] = currentArray; } else { charactersObj[type] = [character]; } }); return ( <div> {Object.entries(charactersObj).map(([charType, charData]) => { return ( <div> <p> {charType}</p> {charData.map(({name, universe}) => <p>name: {name} universe: {universe} </p>)} </div> ); })} </div> ); }Pruebe esto, haga un mapa en la variable finalArray y represente el nombre, el universo, etc.
const data = [ { name:"Thor", universe:"Marvel", type:"God" }, { name:"Batman", universe:"DC", type:"Human" }, { name:"Iron man", universe:"Marvel", type:"Human" }, ]; const _human = data.filter(item => item.type === "Human"); const _god = data.filter(item => item.type === "God"); const finalArray = [..._human, ..._god]; console.log('>>>human', _human); console.log('>>>god', _god); console.log('>>>merge', finalArray);