How to group array items by array.objectProperty in javascript?

Question

From an API call I receive this 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"
    }
  ]

I want to use this to create a menu with dropdown. The mainmenu should contain the categories, the submenu should contain the products with the same category name. So, in this example, in the end there should be three menu items in the main menu, the third menu item contains a submenu with two products. I've tried many things but get kinda stuck. This is the only piece of code left, which obviously is not working.

  const cat = [];    
  products.forEach(product => {
  cat.push(product);
  if (!cat.indexOf(product)) {
    cat.push(product.productCategory);
    console.log(product.productCategory);
  }

EXPECTED RESULT:

CATEGORY A         CATEGORY B      CATEGORY C
Product 1          Product 2       Product 3
                                   Product 4

Menu items --CAT A-- | --CAT B-- | --CAT C-- (Cat A dropdown includes 1 product, Cat B dropdown includes 1 product, Cat C dropdown includes 2 products) — Jeffrey van Zwam, Oct 28 '21 at 07:55
Does this answer your question? [How to group an array of objects by key](https://stackoverflow.com/questions/40774697/how-to-group-an-array-of-objects-by-key) — pilchard, Oct 28 '21 at 08:32

score 1 · Accepted Answer · answered Oct 28 '21 at 08:03

You can use reduce to achieve that result

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)

Genius. Thanks. Clean and simple. Thank you for your quick and helpfull reply! — Jeffrey van Zwam, Oct 28 '21 at 08:05

score 1 · Answer 2 · answered Oct 28 '21 at 08:06

you can do this:

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)

the result should be like this:

{
  'cat 1': [ 'product A' ],
  'cat 2': [ 'product B' ],
  'cat 3': [ 'product C', 'product D' ]
}

you can iterate the result object like this:

for(let key in result){
    // do something with result[key]
}

score 0 · Answer 3 · answered Oct 28 '21 at 08:06

You can store the result in an object where key would represent the Category and the value would be an array of products.

const categories = products.reduce((acc, curr) => {
  acc[curr.productCategory]
    ? acc[curr.productCategory].push(curr.productName)
    : (acc[curr.productCategory] = [curr.productName]);
  return acc;
}, {});

This would output:

{
  cat 1: ['product A']
  cat 2: ['product B']
  cat 3: ['product C', 'product D']
}

How to group array items by array.objectProperty in javascript?

3 Answers3