我如何 map 一個對象數組，里面也有一個對象數組？

Question

我正在使用 TypeScript，我對它有點新手。 我有一個這樣的數組，但每次加載時應用程序都不知道“orderBreakdownList”（“8”和“向上趨勢”）中的鍵。

{
  "userId": "00bdad66",
  "totalNumberOfOrders": 5,
  "totalNumberOfPackages": 54521,
  "totalNumberOfItems": 13,
  "totalNumberOfDeliveredOrders": 3,
  "totalPrice": 39409.0,
  "orderBreakdownList": [
    {
      "8": {
        "noOfItems": 1,
        "noOfPackages": 17160,
        "id": 8,
        "totalPrice": 3741.52,
        "orderItems": [
          {
            "upward-trending": {
              "tag": "upward-trending",
              "value": 6653.16,
              "price": 18798.89,
              "id": 76
            }
          }
        ]
      }
    }
  ]
}

我正在嘗試渲染其中包含對象的“orderBreakdownList”數組，並將第二個數組渲染到列表中。 （單項數據下拉表）

這是我到目前為止嘗試過的，

<div>
      {orderBreakdownList.map((items, index) => {
        return (
          <ol key={index}>
            {items.map((subItems, sIndex) => {
              return <li key={sIndex}> {subItems} </li>;
            })}
          </ol>
        );
     })}
</div>

但是我沒有讓它工作，也沒有從中獲取任何數據。 也許我需要另一個 map 進去？ 我需要一些幫助，拜托。

編輯：根據@rantao 的建議，我想出了以下代碼。 僅使用 html 而沒有 CSS 框架。

<div>
      {orderBreakdownList.map((orderBreakdown, i) => {
        const keyName = Object.keys(orderBreakdown);
        return (
          <div key={i}>
            Order number: {keyName}
            {Object.values(orderBreakdown).map(
              (
                { noOfItems, noOfPackages, id, totalPrice, orderItems }: any,
                i
              ) => {
                return (
                  <div key={i}>
                    <div>Id: {id}</div>
                    <div>Nr. of items: {noOfItems}</div>
                    <div>Nr. of packages: {noOfPackages}</div>
                    <div>Total price:{totalPrice}</div>
                    <ul>
                      {orderItems.map((item: any) =>
                        Object.values(item).map(
                          ({ tag, value, price, id }: any) => (
                            <li key={id}>
                              <div>Id: {id}</div>
                              <div>Tag: {tag}</div>
                              <div>Value: {value}</div>
                              <div>Price: {price}</div>
                            </li>
                          )
                        )
                      )}
                    </ul>
                  </div>
                );
              }
            )}
          </div>
        );
      })}
    </div>

Answer 1

我假設當您說“第二個數組”時，您指的是orderBreakdownList數組中的orderItems 。 在那種情況下，你會做這樣的事情：

<div>
  {orderBreakdownList.map(orderBreakdown => (
    <ol>
      {Object.values(orderBreakdown).map(({ orderItems }) => (
        orderItems.map(item => (
          Object.values(item).map(({ tag, value, price, id }) => (
            <li key={id}>
              <div>{tag}</div>
              <div>{value}</div>
              <div>{price}</div>
            </li>
          )) 
        ))
      ))}
    </ol>
  ))}
</div>

Object.values()獲取 object 的值，而無需顯式定義鍵 - 在本例中為8和upward-trending 。 如果您想知道鍵是什么，請將Object.values()替換為 Object.entries Object.entries() ，它返回包含 object 的key和value的元組數組。

例如：

Object.entries(item).map(([key, value]) => {
 // Map nested item
})

Answer 2

items是 object，您可以通過檢索 object 鍵來獲取子項目。 然后你可以從那里改進

<div>
      {orderBreakdownList.map((items, index) => {
       let keyName = Object.keys(items);
        return (
          <ol key={index}>
              <li> {items[keyName]} </li>;
          </ol>
        );
     })}
</div>