Tengo una matriz de objetos de la siguiente manera. Los datos se basan en created_date por ejemplo ("2021-09-12")
Como puede ver, tengo los últimos 5 días de datos. es decir, 12 de septiembre, 11 de septiembre, 10 de septiembre, 9 de septiembre y 8 de septiembre. La respuesta no tiene ningún dato para el 11 de septiembre y el 8 de septiembre.
const buildData = [ { "project_id": "1H16SET9829", "created_date": "2021-09-12", "status": "P" }, { "project_id": "1J01SET10974", "created_date": "2021-09-10", "status": "F" }, { "project_id": "1J01SET10971", "created_date": "2021-09-09", "status": "P" }, { "project_id": "1J01SET10969", "created_date": "2021-09-09", "status": "F" } ]Según esta información anterior, tengo que mostrar datos en la interfaz de usuario usando el componente funcional de reacción de la siguiente manera
Sep 12, 2021 | Sep 11,2021 | Sep 10, 2021 | Sep 09, 2021 | Sep 08, 2021 1H16SET9829 (P) | | 1J01SET10974 (F) | 1J01SET10971 (P) | | | | 1J01SET10971 (F) | ¿Puede alguien decirme cómo lograr esto? Intenté lo siguiente pero no muestra los datos correctos. No entiendo cómo mostrar project_id correcto debajo de su fecha. También algunas fechas tienen 2 project_ids. por ejemplo, Sep 09,2021 tiene 2 project_ids y ambos deben mostrarse uno debajo del otro y luego continuar con la próxima fecha.
const renderProjects = (props) => { const items = buildData.map( (t, idx) => ( <> <div>{ t.created_date }</div> <div>{t.project_id</div> </> )) return ( <div className="project-list"> { items } </div> ) }Puedes hacer algo como esto (ver comentarios en línea):
const buildData = [ { project_id: '1H16SET9829', created_date: '2021-09-12', status: 'P', }, { project_id: '1J01SET10974', created_date: '2021-09-10', status: 'F', }, { project_id: '1J01SET10971', created_date: '2021-09-09', status: 'P', }, { project_id: '1J01SET10969', created_date: '2021-09-09', status: 'F', }, ]; export const RenderProjects = (props) => { // convert the buildData into a map from date -> list of `{project_id, status}`s const buildDataByDate = buildData.reduce((map, project) => { const projectInfo = { project_id: project.project_id, status: project.status, }; if (!map[project.created_date]) { map[project.created_date] = [projectInfo]; } else { map[project.created_date].push(projectInfo); } return map; }, {}); // find the first and last dates const minDate = Object.keys(buildDataByDate).sort()[0]; const maxDate = Object.keys(buildDataByDate).sort().reverse()[0]; // find how many days are between them const daysBetween = (Date.parse(maxDate) - Date.parse(minDate)) / (24 * 60 * 60 * 1000); // add in the missing dates [...Array(daysBetween).keys()].forEach((increment) => { const dateToAdd = new Date( Date.parse(minDate) + increment * 24 * 60 * 60 * 1000, ) .toISOString() .substring(0, 10); if (!buildDataByDate[dateToAdd]) { buildDataByDate[dateToAdd] = []; } }); // render something for each entry in that map const items = Object.entries(buildDataByDate) .sort((a, b) => { return Date.parse(b[0]) - Date.parse(a[0]); }) .map(([date, projects]) => { return ( <React.Fragment key={date}> <div>{date}</div> {projects.map((project) => { return ( <div key={project.project_id} >{`${project.project_id} (${project.status})`}</div> ); })} </React.Fragment> ); }); return <div className='project-list'>{items}</div>; };