我如何将 .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)