问题描述
我正在努力获取所需的数据,并想知道是否有人可以提出建议。
我有类似的数据:
Order: [
{
id: 1,date: 2020-07-21,OrderLines: {
OrderLine: [
{orderlineId: 1,price: 20},{orderlineId: 2,price: 25}
]
}
},{
id: 2,OrderLines: {
OrderLine: [
{orderlineId: 3,price: 10},{orderlineId: 4,price: 15}
]
}
}
]
我如何获得访问权限,以便可以对OrderLine数组进行.map()?
我已经解决了这个问题,它可以工作,但在部分途中会因错误而失败:
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,price: 15}
]
}
},{
id: 3,date: 'Its made up'
OrderLines: {
OrderLine: {orderlineId: 5,price: 5}
}
}
]
将用if / else解决
解决方法
因为您要为每个数组项目提取多个项目,所以我不会使用map,而是减少:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
您可以在此行执行操作:
Order.reduce((acc,cur) => [...acc,...cur.OrderLines.OrderLine],[]);
-编辑后进行编辑---
我现在看到有时OrderLine的值是一个Object,而不是数组。您可以添加数组检查。
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,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)