JavaScript map 里面 map

Question

我目前正在使用 React 和 JavaScript 構建預算應用程序。現在我可以打印如下所示的成本表。

名稱	預算	使用 $	用過的 ％	可用的
食物	300	300	100	0
流媒體服務	600	600	100	0

這是我通過每個項目獲取數據和 map 到表中的代碼：

     <tbody>
      {expenses.budgetedAmounts
        .sort((a, b) => {
          return a.department < b.department;
        })
        .map((item, index) => (
          <tr
            key={index}
          >

            <td>
              {item.name}
            </td>

            <td>
              {item.budgetedExpense}
            </td>

            <td>
              {item.actualExpense} 
            </td>

            <td>
              {item.percentageUsed} 
            </td>

            <td>
              {item.availableExpense}
            </td>
          </tr>
        ))}
    </tbody>

我還想在表格中添加子項目，以顯示每個項目的預算構成。 例如，食品預算包括炸薯條和蘋果。

名稱	預算	使用 $	用過的 ％	可用的
食物	300	300	100	0
• 炸薯條	150
• 蘋果	150
流媒體服務	600	600	100	0
• Netflix	300
•迪士尼+	300

子項目也在數組中，可以通過“項目”訪問。 我想我可以在第一個 map 方法之后添加另一個循環：

              {item.nestedItems.map((nested, secondIndex) =>              
              )}

我可以訪問這樣的項目：

{nested.name} and {nested.price}

數據已正確獲取，但我似乎無法弄清楚在代碼中放置嵌套循環的位置以及如何實現所需的表結構。 我知道如果不能嘗試代碼，這可能是一個很難回答的問題，但是任何有幫助的想法都會很棒！

Answer 1

你可以先展平你的數組，然后做最后的 map，采取一些未定義的屬性不會導致undefined輸出的預防措施：

    <tbody>
      {expenses.budgetedAmounts
        .sort((a, b) => a.department < b.department)
        .flatMap(a => [a, ...a.nestedItems])
        .map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
            <td>{item.budgetedExpense ?? item.price}</td>
            <td>{item.actualExpense ?? ""}</td>
            <td>{item.percentageUsed ?? ""}</td>
            <td>{item.availableExpense ?? ""}</td>
          </tr>
        ))}
    </tbody>

請注意，該index現在不再與非展平數組中的原始索引相對應。 我假設它只是用作唯一參考，但如果不是，您可能需要添加一些代碼以仍然可以訪問原始索引。

Answer 2

嘗試這個

<tbody>
    { budgetedAmounts.map((item,index)=>{
      return(
      <> 
      <tr key={index + "b"}> 
         <td>{item.name}</td>
         <td>{item.budgetedExpense}</td>
         <td>{item.actualExpense}</td>
         <td>{item.percentageUsed}</td>
         <td>{item.availableExpense}</td>
      </tr>
      { item.subItem && item.subItem.map((subItem,subIndex)=>{
          return(
             <tr key={item.id + " __ "+subIndex}>
             <td>{subItem.name}</td>
             <td>{subItem.budgetedExpense}</td>
             <td>{subItem.actualExpense}</td>
             <td>{subItem.percentageUsed}</td>
             <td>{subItem.availableExpense}</td>
             </tr>
          )
       })
      }
     </>
   )
 })
}
</tbody>

Answer 3

最簡單的方法就是做你想做的事。 在第一個 map 的標簽后面再寫一個 map 來渲染子項行。 是這樣的：

  <tbody>
  {expenses.budgetedAmounts
    .sort((a, b) => {
      return a.department < b.department;
    })
    .map((item, index) => (
      <><tr
        key={index}
      >

        <td>
          {item.name}
        </td>

        <td>
          {item.budgetedExpense}
        </td>

        <td>
          {item.actualExpense} 
        </td>

        <td>
          {item.percentageUsed} 
        </td>

        <td>
          {item.availableExpense}
        </td>
      </tr>
      {item.nestedItems.map((nested, secondIndex) =>   <tr>
        <td> {nested.name}</td>  <td> {nested.price} </td>

      </tr>)}</>
    ))}
</tbody>