我試圖找到我的問題的解決方案，但找不到，所以我有一組物件（產品），每個產品都有一個類別屬性，我想按類別對產品進行分組。我設法使用 reduce() 做到了這一點，但現在我需要先呈現類別名稱，然后是該類別中的產品。
例子：
const products = [
{id: 1, category: 'Burgers', name: 'Burger'},
{id: 2, category: 'Burgers', name: 'Cheeseburger'},
{id: 3, category: 'Meals', name: 'Burger meal'},
{id: 4, category: 'Meals', name: 'Cheeseburger meal'}
]
我需要按類別對這些產品進行分組，我使用 reduce()
const menu = products.reduce((menu, product) => {
if (menu[product.category] == null) menu[product.category] = []
menu[product.category].push(product)
return menu
}, [])
所以現在我的結果是
[Burgers: Array(2), Meals: Array(2)]
但我想用 map() 渲染那些，所以我該怎么做？或者我怎樣才能改變結果？我希望結果像
Categories: [
{
0:
name: 'Burgers',
products: Array(2)
},
{
1:
name: 'Meals',
products: Array(2)
}
]
這樣我就可以用像這樣的地圖渲染那個陣列
<div>
{menu.map((c, index) =>
<Category key={index} name={c.name} products={c.products} />
)}
</div>
uj5u.com熱心網友回復：
const products = [
{id: 1, category: 'Burgers', name: 'Burger'},
{id: 2, category: 'Burgers', name: 'Cheeseburger'},
{id: 3, category: 'Meals', name: 'Burger meal'},
{id: 4, category: 'Meals', name: 'Cheeseburger meal'}
]
const menu = products.reduce((acc, product)=> {
const categoryIndex = acc.findIndex(item => item.name == product.category);
if(categoryIndex > -1){
acc[categoryIndex].products.push(product);
}else {
acc.push({ name: product.category, products: [product] })
};
return acc;
}, []);
console.log(menu)uj5u.com熱心網友回復：
起初，我只是在回答關于如何分組的純 javascript 問題
products.reduce((prev, curr) => {
if(!prev.categories.hasOwnProperty(curr.category)) prev.categories[curr.category] = prev.count
const index = prev.categories[curr.category]
if(!Array.isArray(prev.menu[index])) prev.menu[index] = []
prev.menu[index].push(curr)
return prev
}, {count: 0, menu: [], categories:{}}).menu
從那里，我猜你的地圖看起來像這樣：
<div>
{menu.forEach((c, i) =>
<Category key={i} name={c[0].category} products={c} />
)}
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375745.html