De una llamada API recibo este JSON:
products: [ { productName: "product A", productCategory: "cat 1" }, { productName: "product B", productCategory: "cat 2" }, { productName: "product C", productCategory: "cat 3" }, { productName: "product D", productCategory: "cat 3" } ]Quiero usar esto para crear un menú con menú desplegable. El menú principal debe contener las categorías, el submenú debe contener los productos con el mismo nombre de categoría. Entonces, en este ejemplo, al final debe haber tres elementos de menú en el menú principal, el tercer elemento de menú contiene un submenú con dos productos. He intentado muchas cosas pero me quedo un poco atascado. Esta es la única pieza de código que queda, que obviamente no funciona.
const cat = []; products.forEach(product => { cat.push(product); if (!cat.indexOf(product)) { cat.push(product.productCategory); console.log(product.productCategory); }RESULTADO ESPERADO:
CATEGORY A CATEGORY B CATEGORY C Product 1 Product 2 Product 3 Product 4Puedes usar reducir para lograr ese resultado.
const products = [ { productName: "product A", productCategory: "cat 1" }, { productName: "product B", productCategory: "cat 2" }, { productName: "product C", productCategory: "cat 3" }, { productName: "product D", productCategory: "cat 3" } ] const productMenu = products.reduce((menu, item) => { const existingCategory = menu[item.productCategory] || [] return { ...menu, [item.productCategory] : [...existingCategory, item] }; }, {}) console.log(productMenu)Puedes hacerlo:
function convert(products) { const result = {} products.forEach(p => { const cat = p.productCategory if (Array.isArray(result[cat])) result[cat].push(p.productName) else result[cat] = [p.productName] }) return result } const convertedProducts = convert(products)el resultado debería ser así:
{ 'cat 1': [ 'product A' ], 'cat 2': [ 'product B' ], 'cat 3': [ 'product C', 'product D' ] }puede iterar el objeto de resultado de esta manera:
for(let key in result){ // do something with result[key] }Puede almacenar el resultado en un objeto donde la clave representaría la categoría y el valor sería una matriz de productos.
const categories = products.reduce((acc, curr) => { acc[curr.productCategory] ? acc[curr.productCategory].push(curr.productName) : (acc[curr.productCategory] = [curr.productName]); return acc; }, {});Esto daría como resultado:
{ cat 1: ['product A'] cat 2: ['product B'] cat 3: ['product C', 'product D'] }