Soy bastante nuevo tanto en reaccionar como en JavaScript y realmente agradecería algunos consejos al respecto. Quiero iterar a través de una matriz anidada como la siguiente usando el método map():
const demos = [ { id : '1', name: 'name1', dates: ['jan', 'feb', 'apr'] }, { id : '2', name: 'name2', dates: ['feb', 'may'] } ];Primero quiero mapear el primer objeto con la primera fecha y luego la segunda fecha y así sucesivamente, antes de pasar al siguiente objeto y luego ordenarlo según la fecha para lograr idealmente el siguiente resultado:
name1: jan name1: feb name2: feb name1: apr name2: mayLa única solución que no funciona del todo que he encontrado hasta ahora es:
import * as React from 'react'; const demos = [ {id : '1', name: 'name1', dates: ['jan', 'feb', 'apr'] }, {id : '2', name: 'name2', dates: ['feb', 'may'] } ]; const counts = ['0','1','2']; export default function Test() { return ( <div> { counts.map(count => ( demos.map(demo =>( <div key={demo.id}> <div>{demo.name}: {demo.dates[count]}</div> </div> )) )) } </div> ); }lo que me da el siguiente resultado:
name1: jan name2: feb name1: feb name2: may name1: apr name2: usar los const counts realmente no funciona y no se siente como la forma correcta de empezar. ¿Cómo puedo hacer esto de una buena manera y luego ordenarlo por fecha?
ordenado
const App = () => { const demos = [ { id: "1", name: "name1", dates: ["jan", "feb", "apr"] }, { id: "2", name: "name2", dates: ["feb", "may"] } ]; const monthIdx = { jan: 1, feb: 2, mar: 3, apr: 4, may: 5, jun: 6, jul: 7, aug: 8, sep: 9, oct: 10, nov: 11, dec: 12 }; const sortedDemo = demos .map((demo) => { return demo.dates.map((date) => ({ [demo.name]: date })); }) .flat() .sort((a, b) => { const monthA = Object.values(a)[0]; const monthB = Object.values(b)[0]; return monthIdx[monthA] - monthIdx[monthB]; }); return sortedDemo.map((demo) => { const [key] = Object.entries(demo); const [name, date] = key; return ( <div> {name} - {date} </div> ); }); };sin ordenar
const demos = [ { id: "1", name: "name1", dates: ["jan", "feb", "apr"] }, { id: "2", name: "name2", dates: ["feb", "may"] } ]; return demos.map((demo) => { return demo.dates.map((date) => ( <div> {demo.name} - {date} </div> )); });Uno puede proporcionar un código viable utilizando fragmentos de pila como a continuación:
const demos = [ {id : '1', name: 'name1', dates: ['jan', 'feb', 'apr'] }, {id : '2', name: 'name2', dates: ['feb', 'may'] } ]; // const counts = ['0','1','2']; function Test() { const sortHelper = Object.fromEntries(("jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec") .split(", ").map((m, idx) => ([m, idx]))); const transformArr = arr => ( [...arr].map(({name, dates}) => ( dates.map(month => ({ name, month })) )) .flat() .sort((a, b) => (sortHelper[a.month] - sortHelper[b.month])) ); return ( <div> { transformArr(demos).map(({name, month}) => ( <div>{name}: {month}</div> )) } </div> ); } ReactDOM.render( <div> DEMO <Test /> </div>, document.getElementById("rd") ); <div id="rd"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>Explicación
sortHelper.map y desestructurar name , datesdates para crear un objeto con dos accesorios name , month.flat() para eliminar matrices anidadas.sort() junto con sortHelper para proporcionar el orden necesarioImplemente el siguiente código en su
{demo.name}: {`demo.dates.map((e) => {e} )`} Debería funcionar.