Group Array of JavaScript Objects by Key or Property Value

group-objects-by-property.md

Group Array of JavaScript Objects by Key or Property Value

Implementation

const groupBy = key => array =>
  array.reduce((objectsByKeyValue, obj) => {
    const value = obj[key];
    objectsByKeyValue[value] = (objectsByKeyValue[value] || []).concat(obj);
    return objectsByKeyValue;
  }, {});

Or using an implicit return (slower):

const groupBy = key => array =>
  array.reduce(
    (objectsByKeyValue, obj) => ({
      ...objectsByKeyValue,
      [obj[key]]: (objectsByKeyValue[obj[key]] || []).concat(obj)
    }),
    {}
  );

Usage

const cars = [
  { brand: 'Audi', color: 'black' },
  { brand: 'Audi', color: 'white' },
  { brand: 'Ferarri', color: 'red' },
  { brand: 'Ford', color: 'white' },
  { brand: 'Peugot', color: 'white' }
];

const groupByBrand = groupBy('brand');
const groupByColor = groupBy('color');

console.log(
  JSON.stringify({
    carsByBrand: groupByBrand(cars),
    carsByColor: groupByColor(cars)
  }, null, 2)
);

Output

{
  "carsByBrand": {
    "Audi": [
      {
        "brand": "Audi",
        "color": "black"
      },
      {
        "brand": "Audi",
        "color": "white"
      }
    ],
    "Ferarri": [
      {
        "brand": "Ferarri",
        "color": "red"
      }
    ],
    "Ford": [
      {
        "brand": "Ford",
        "color": "white"
      }
    ],
    "Peugot": [
      {
        "brand": "Peugot",
        "color": "white"
      }
    ]
  },
  "carsByColor": {
    "black": [
      {
        "brand": "Audi",
        "color": "black"
      }
    ],
    "white": [
      {
        "brand": "Audi",
        "color": "white"
      },
      {
        "brand": "Ford",
        "color": "white"
      },
      {
        "brand": "Peugot",
        "color": "white"
      }
    ],
    "red": [
      {
        "brand": "Ferarri",
        "color": "red"
      }
    ]
  }
}

nice!

Nice!!!

Save my day. Thanks.

Thanks for that solution, saved me a lot o time.

@JamieMason Thanks for the great code but if we want to get like this

group data = [{"title":"AB", data:[{},{},{}]}, {"title":"BC", data:[{},{},{}]}]

Sorry @hussainahmad, I don't understand?

@JamieMason I am talking to convert array like this

[
  {
    "title": "Audi",
    "data": [
      {
        "brand": "Audi",
        "color": "black"
      },
      {
        "brand": "Audi",
        "color": "white"
      }
    ]
  },
  {
    "title": "Ferarri",
    "data": [
      {
        "brand": "Ferarri",
        "color": "red"
      }
    ]
  },
  {
    "title": "Ford",
    "data": [
      {
        "brand": "Ford",
        "color": "white"
      }
    ]
  },
  {
    "title": "Peugot",
    "data": [
      {
        "brand": "Peugot",
        "color": "white"
      }
    ]
  }
]

You want to convert that into [{"title":"AB", data:[{},{},{}]}, {"title":"BC", data:[{},{},{}]}]? can you give some more context on what you're trying to build? why would you want those empty objects for example?

@JamieMason empty objects was just an example sorry for confusing you. , let assume I have a data

const cars = [
  { brand: 'Audi', color: 'black' },
  { brand: 'Audi', color: 'white' },
  { brand: 'Ferarri', color: 'red' },
  { brand: 'Ford', color: 'white' },
  { brand: 'Peugot', color: 'white' }
];

and I want to convert this array in to this array

[
  {
    "title": "Audi",
    "data": [
      {
        "brand": "Audi",
        "color": "black"
      },
      {
        "brand": "Audi",
        "color": "white"
      }
    ]
  },
  {
    "title": "Ferarri",
    "data": [
      {
        "brand": "Ferarri",
        "color": "red"
      }
    ]
  },
  {
    "title": "Ford",
    "data": [
      {
        "brand": "Ford",
        "color": "white"
      }
    ]
  },
  {
    "title": "Peugot",
    "data": [
      {
        "brand": "Peugot",
        "color": "white"
      }
    ]
  }
]

I think this should do it @hussainahmad:

const groupByBrand = groupBy('brand');
const carsByBrand = groupByBrand(cars);
const carBrands = Object.entries(carsByBrand).map(([title, data]) => ({ title, data }));

Really Thanks to you @JamieMason , May God bless you

You're welcome

@JamieMason, Thanks a lot!!! It is very useful !!!!

@JamieMason Amazing work.. Quick One, how can one get the count of each group?

Like this @scelloo-elegeonyejerome:

const groupBy = (key) => (array) =>
  array.reduce((objectsByKeyValue, obj) => {
    const value = obj[key];
    objectsByKeyValue[value] = (objectsByKeyValue[value] || []).concat(obj);
    return objectsByKeyValue;
  }, {});

const cars = [
  { brand: 'Audi', color: 'black' },
  { brand: 'Audi', color: 'white' },
  { brand: 'Ferarri', color: 'red' },
  { brand: 'Ford', color: 'white' },
  { brand: 'Peugot', color: 'white' },
];

const groupByBrand = groupBy('brand');
const carsByBrand = groupByBrand(cars);

Object.entries(carsByBrand).forEach(([brand, cars]) => {
  console.log(`${cars.length} ${brand}`);
});

Outputs

"2 Audi"
"1 Ferarri"
"1 Ford"
"1 Peugot"

@JamieMason arriving late to the party and newbie to JS: Is there a particular reason for double arrow-functions here or can it be rewritten as function with two parameters key, array ?

You could do this @chgad, you're right.

- const groupBy = (key) => (array) =>
+ const groupBy = (key, array) =>

The reason for double arrow-functions (a function creator / a function which returns another function) is so we can do things like this:

export const groupByBrand = groupBy('brand');

so users of your module do this:

groupByBrand(cars);

Instead of this:

groupBy('brand', cars);

Broadly speaking it's a matter of style or taste. It comes from a functional programming-like style of writing JS.

Really – the benefits of it aren't obvious or arguably even applicable in this little example, but generating functions can make for really reusable, readable code. You need to be careful though and develop a sense for knowing when doing this would be an upgrade and not a downgrade.

A rule of thumb would be to not do what I'm doing here, unless you're confident in how to generate and compose functions in a functional style.

I think this should do it @hussainahmad:

const groupByBrand = groupBy('brand');
const carsByBrand = groupByBrand(cars);
const carBrands = Object.entries(carsByBrand).map(([title, data]) => ({ title, data }));

@JamieMason how could I add another value to the top collection, if I had engine as a value in the original array:

{
  "title": "Audi",
  "engine": "V8",
  "data": [
    {
      "brand": "Audi",
      "color": "black"
    },
    {
      "brand": "Audi",
      "color": "white"
    }
  ]
}

@aboudrea please add more detail