Tengo lo siguiente donde mostrará elementos de cierta manera.
import './App.css' import _ from 'lodash' const App = () => { const dataone = [ { id: 1, month: 'jan', level: 8, clazz_id: '1A' }, { id: 2, month: 'feb', level: 6, clazz_id: '1A' }, { id: 3, month: 'jan', level: 2, clazz_id: '2B' }, { id: 4, month: 'feb', level: 3, clazz_id: '2B' }, { id: 5, month: 'mar', level: 5, clazz_id: '2B' }, ] const data = _.groupBy(dataone, 'clazz_id') const entries = Object.entries(data) return ( <div className='App'> {entries.map((item, index) => ( <div> <h2>{item[0]}</h2> <h2> {item[1].map((e) => ( <p> {e.month} {'--'} {e.level} </p> ))} </h2> </div> ))} </div> ) } export default AppEl código anterior mostrará la matriz de objetos como a continuación:
1A jan-8 feb-6 2B jan-2 feb-3 mar-5Esto es lo que quiero, sin embargo, el código anterior se realiza con lodash y object.entries, por lo que estoy buscando una solución mejor y más clara.
Esto se puede lograr utilizando solo los componentes integrados de Javascript ( Array.reduce , Array.map y Object.entries ). Es mejor evitar el uso de lodash , ya que aumentará el tamaño del paquete de su aplicación web y hará que la aplicación sea más lenta al cargar.
Lo haría como a continuación.
const App = () => { const dataone = [ { id: 1, month: "jan", level: 8, clazz_id: "1A" }, { id: 2, month: "feb", level: 6, clazz_id: "1A" }, { id: 3, month: "jan", level: 2, clazz_id: "2B" }, { id: 4, month: "feb", level: 3, clazz_id: "2B" }, { id: 5, month: "mar", level: 5, clazz_id: "2B" } ]; return ( <div className="App"> {Object.entries( dataone.reduce((prev, curr) => { prev[curr.clazz_id] ? prev[curr.clazz_id].push(curr) : (prev[curr.clazz_id] = [curr]); return prev; }, {}) ).map(([key, value]) => { return ( <div> <h2>{key}</h2> <h2> {value.map(({ level, month }) => ( <p> {month} {"--"} {level} </p> ))} </h2> </div> ); })} </div> ); }; ReactDOM.render(<App/>, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>Puede usar reduce para agrupar por los datos en el formato requerido
export default function App() { const dataone = [ { id: 1, month: 'jan', level: 8, clazz_id: '1A' }, { id: 2, month: 'feb', level: 6, clazz_id: '1A' }, { id: 3, month: 'jan', level: 2, clazz_id: '2B' }, { id: 4, month: 'feb', level: 3, clazz_id: '2B' }, { id: 5, month: 'mar', level: 5, clazz_id: '2B' }, ]; function groupByClass(arr) { return arr.reduce((acc, curr) => { if (!acc[curr.clazz_id]) { acc[curr.clazz_id] = { classId: curr.clazz_id, level: [`${curr.month}-${curr.level}`], }; } else { acc[curr.clazz_id].level.push(`${curr.month}-${curr.level}`); } return acc; }, {}); } const groupedData = groupByClass(dataone); console.log(groupedData); return ( <div className="App"> {Object.keys(groupedData).map((item) => { return ( <div> <div>{groupedData[item].classId}</div> {groupedData[item].level.map((elem) => { return <p>{elem}</p>; })} </div> ); })} </div> ); }Lodash también tiene un método .map que también puede iterar sobre objetos. Entonces, podrías usar eso para mantener la coherencia.
const App = () => { const dataone = [ { id: 1, month: 'jan', level: 8, clazz_id: '1A' }, { id: 2, month: 'feb', level: 6, clazz_id: '1A' }, { id: 3, month: 'jan', level: 2, clazz_id: '2B' }, { id: 4, month: 'feb', level: 3, clazz_id: '2B' }, { id: 5, month: 'mar', level: 5, clazz_id: '2B' }, ] const data = _.groupBy(dataone, 'clazz_id') return ( <div className='App'> {_.map(data,(value, key) => ( <div> <h2>{key}</h2> <h2> {value.map((e) => ( <p> {e.month} {'--'} {e.level} </p> ))} </h2> </div> ))} </div> ) } ReactDOM.render(<App/>, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <div id="root"></div>