[{ orderList: [{ menuType: 'A', detailList: [1, 2, 3] }, { detailList: [4, 5, 6] }] }, { orderList: [{ menuType: 'B', detailList: [7, 8, 9] }] }, { orderList: [{ menuType: 'A', detailList: [10, 11, 12] }] }] vue遍历这种数据 如果orderList里面的menuType相同就把相同的两个的 detailList合并一起
时间: 2024-01-02 08:02:52 浏览: 90
UML基础:组件图
可以通过以下方式实现:
1. 遍历整个数据,将相同 menuType 的 orderList 放在一起,得到一个新的数组 mergedOrders。
2. 对于 mergedOrders 中的每个元素,将其中的 detailList 合并成一个新数组。可以使用 reduce 方法来实现。
以下是示例代码:
```javascript
// 原始数据
const orders = [
{
orderList: [
{
menuType: 'A',
detailList: [1, 2, 3]
},
{
detailList: [4, 5, 6]
}
]
},
{
orderList: [
{
menuType: 'B',
detailList: [7, 8, 9]
}
]
},
{
orderList: [
{
menuType: 'A',
detailList: [10, 11, 12]
}
]
}
];
// 将相同 menuType 的 orderList 放在一起
const mergedOrders = orders.reduce((result, order) => {
const index = result.findIndex(item => item.menuType === order.orderList[0].menuType);
if (index === -1) {
result.push({
menuType: order.orderList[0].menuType,
orderList: order.orderList
});
} else {
result[index].orderList = result[index].orderList.concat(order.orderList);
}
return result;
}, []);
// 合并 detailList
const mergedDetailLists = mergedOrders.map(order => {
const detailList = order.orderList.reduce((result, item) => {
if (item.detailList) {
result = result.concat(item.detailList);
}
return result;
}, []);
return {
menuType: order.menuType,
detailList
};
});
console.log(mergedDetailLists);
// 输出:
// [
// {
// "menuType": "A",
// "detailList": [1, 2, 3, 10, 11, 12]
// },
// {
// "menuType": "B",
// "detailList": [7, 8, 9]
// }
// ]
```
以上代码中,我们首先使用 reduce 方法将相同 menuType 的 orderList 放在一起,得到 mergedOrders 数组。然后对于 mergedOrders 中的每个元素,使用 reduce 方法将其中的 detailList 合并成一个新数组,得到 mergedDetailLists 数组。
阅读全文