回圈瀏覽物件陣列并在反應組件中顯示它們

我有一個物件的陣列，如下所示。資料是基于created_date的，例如（"2021-09-12"）

正如你所看到的，我得到了最近5天的資料，即9月12日、9月11日、9月10日、9月9日和9月8日。 回應沒有9月11日和9月8日的任何資料。

const buildData = [
    {
      "project_id"。"1H16SET9829"。
      "created_date": "2021-09-12",
      "status": "P", "status".
    },
    {
      "project_id": "1J01SET10974",
      "created_date": "2021-09-10",
      "status": "F".
    },
    {
      "project_id": "1J01SET10971",
      "created_date": "2021-09-09",
      "status": "P", "status".
    },
    {
      "project_id": "1J01SET10969",
      "created_date": "2021-09-09",
      "status": "F", "status".
    }
]

基于上述資訊，我必須使用反應功能組件在UI中顯示資料，如下所示

誰能讓我知道如何實作這個目標。我嘗試了以下方法，但它沒有顯示正確的資料。我沒有得到如何在其日期下面顯示正確的project_id。例如，2021年9月9日有兩個project_ids，這兩個project_ids都需要顯示在另一個下面，然后再繼續顯示下一個日期。

const renderProjects = （props）=> {
    const items = buildData.map( (t, idx) => /span> (
        <>()
          <div>{ t.created_date }</div> 
          <div>{t.project_id</div>
        </>
    ))

    return (
        <div className="project-list">)
            {專案 }
        </div>>
    )
}

uj5u.com熱心網友回復：

你可以這樣做（見行內評論）：

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）=> { //將buildData轉換為來自日期的地圖 -> `{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。 }, {}); //找到第一個和最后一個日期。 const minDate = Object. keys(buildDataByDate).sort()[0] 。 const maxDate = Object.keys（buildDataByDate）。 sort().reverse()[0] 。 //發現他們之間有多少天的距離。 const daysBetween = (Date.parse(maxDate) - Date.parse(minDate) / (24 * 60 * 60 * 1000) 。 //加入缺少的日期。 [...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] = []; } }); //為該地圖中的每個條目渲染一些東西。 const items = Object.entries(buildDataByDate) .sort((a, b) => { return Date.parse(b[0]) - Date。 parse(a[0] ）。) }) .map(([date, projects]/span>) => { return ( <React.Fragment key={date}>/span> <div>{date}</div> {projects.map((project) => { 回傳( <div key={project.project_id}。 >{`${project.project_id}}. (${project.status})`}</div>/span> ); })} </React.Fragment>) ); }); return < div className='project-list'>{items}</div> ; };

標籤：

上一篇：從編程生成的子元素中訪問置于父元素中的InkToolbar

下一篇：修改物件的陣列，如果為空，則用額外的屬性代替