我如何將 .map() 和 Array 嵌套在一個對象內，在一個數組內？

Question

我正在努力訪問我需要的數據，並想知道是否有人可以提供建議。

我有看起來與此類似的數據：

Order: [
  {
    id: 1, 
    date: 2020-07-21, 
    OrderLines: {
      OrderLine: [
        {orderlineId: 1, price: 20},
        {orderlineId: 2, price: 25}
      ]
    }
  },
  {
    id: 2, 
    date: 2020-07-21, 
    OrderLines: {
      OrderLine: [
        {orderlineId: 3, price: 10},
        {orderlineId: 4, price: 15}
      ]
    }
  }
]

我如何獲得訪問權限以便我可以 .map() OrderLine 數組？

我已經這樣做了，這有點有效，但在中途出現錯誤而失敗：

Order.map(order => {
        order.OrderLines.OrderLine.map(line => console.log(line))
      })

以上失敗orderitems.jsx:10 Uncaught TypeError: order.OrderLines.OrderLine.map is not a function

我正在努力實現的目標：

我在 nextjs(react) 應用程序中使用它，只需要能夠列出 OrderLine 數組中的每個對象到頁面。

---

因此，問題似乎是當 OrderLine 數組中只有一個項目時，該數組將成為單個對象。 我將更新我的示例數據。

例子：

Order: [
  {
    id: 1, 
    date: 2020-07-21, 
    OrderLines: {
      OrderLine: [
        {orderlineId: 1, price: 20},
        {orderlineId: 2, price: 25}
      ]
    }
  },
  {
    id: 2, 
    date: 2020-07-21, 
    OrderLines: {
      OrderLine: [
        {orderlineId: 3, price: 10},
        {orderlineId: 4, price: 15}
      ]
    }
  },
  {
    id: 3,
    date: 'Its made up'
    OrderLines: {
      OrderLine: {orderlineId: 5, price: 5}
    }
  }
]

將用 if/else 解決

Answer 1

因為您要為每個數組項提取多個項，所以我不會使用 map，而是減少：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

您可以使用以下行執行操作：

Order.reduce((acc, cur) => [...acc, ...cur.OrderLines.OrderLine], []);

--- 編輯后編輯 ---

我現在看到有時 OrderLine 的值是一個對象，而不是一個數組。 您可以添加數組檢查。

Order.reduce((acc, cur) => {
    if (Array.isArray(cur.OrderLines.OrderLine)) {
        return [...acc, ...cur.OrderLines.OrderLine];
    } else if (cur.OrderLines.OderLine) {
        return [...acc, cur.OrderLines.OrderLine];
    }
}, []);

這是一個片段：

 const Order = [ { id: 1, date: 2020-07-21, OrderLines: { OrderLine: [ {orderlineId: 1, price: 20 }, {orderlineId: 2, price: 25 } ] } }, { id: 2, date: 2020-07-21, OrderLines: { OrderLine: [ {orderlineId: 3, price: 10 }, {orderlineId: 4, price: 15 } ] } } ] const orderLines = Order.reduce((acc, cur) => { if (Array.isArray(cur.OrderLines.OrderLine)) { return [...acc, ...cur.OrderLines.OrderLine]; } else if (cur.OrderLines.OderLine) { return [...acc, cur.OrderLines.OrderLine]; } }, []); console.log(orderLines)