Sun May 29 2022
Best way to group an array of objects by a key
A quick walkthrough on how to use the array reduce method to group objects in an array by any property value
Problem
I had a bunch of objects coming from a backend and needed to sort these objects by a property value of my choosing. So if the objects in the array looked like this
1const people = [2 { name: "James", age: 21, sport: "rugby" },3 { name: "Coco", age: 20, sport: "chess" },4 { name: "Puff", age: 20, sport: "football" },5];
I wanted to be able to have the below after passing this `people` array and specifying `sport` as the property key I wanted to sort these objects by.
1{2 rugby: [{ name: "James", age: 21, sport: "rugby" }],3 chess: [{ name: "Coco", age: 20, sport: "chess" }],4 football: [{ name: "Puff", age: 20, sport: "football" }],5};
Solution
A quick function that looks like below
1const groupBy = (data, groupByValue) => {2 const groupedByData = data.reduce((accumalatedValue, currentValue) => {3 // key is the property value of the passed groupByValue parameter4 // since we passsed 'sports' as groupByValue, in the first iteration, the key would be 'rugby'5 const key = currentValue[groupByValue];6 // we look at whether the current accumalatedValue has a property with the key 'rugby'7 if (!accumalatedValue[key]) {8 // if there is no key called 'rugby' in accumalatedValue,9 // we create a new property with an empty []10 accumalatedValue[key] = [];11 }12 // since we now have a property with the key 'rugby',13 // we basically push the currentValue object into its array14 accumalatedValue[key].push(currentValue);15 // then we return the accumalatedValue so that it can be used for the next iteration16 return accumalatedValue;17 }, {});18 return groupedByData;19};
Result
1const cleanedObject = groupBy(people, "sport");
`cleanedObject` now looks like this
1{2 rugby: [{ name: "James", age: 21, sport: "rugby" }],3 chess: [{ name: "Coco", age: 20, sport: "chess" }],4 football: [{ name: "Puff", age: 20, sport: "football" }],5};
Did this help you or do you know of any alternative ways of handling this? Hit me up in the comments below!