In this article, we will explore how to group by array in JavaScript, providing you with a clear understanding and hands-on examples.
When dealing with arrays in JavaScript, there are times when you need to group the elements based on certain criteria.
Grouping arrays can be beneficial for various tasks, such as data analysis, filtering, and displaying data in a more organized manner.
What is Javascript Array Group by?
“Array Group by” in JavaScript refers to the process of grouping array components based on a specified criterion or feature. It allows you to organize an array of items into sub-arrays based on a common property value.
As a result, a new data structure is created in which elements with the same attribute value are grouped together.
How to group by array in JavaScript
To group an array in JavaScript, you can use various techniques and methods. Let’s explore some of the most effective approaches:
1. Using the reduce() Method
The reduce() method is an effective approach to organize array components. It loops through the array, calling a callback function on each element and adding the results to a single value.
const data = [
{ category: 'fruit', name: 'orange' },
{ category: 'vegetable', name: 'eggplant' },
{ category: 'fruit', name: 'grapes' },
{ category: 'vegetable', name: 'spinach' }
];
const groupedData = data.reduce((acc, item) => {
const key = item.category;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(item.name);
return acc;
}, {});
console.log(groupedData);
Output:
{
fruit: ['orange', 'grapes'],
vegetable: ['eggplant', 'spinach']
}
2. Utilizing the map() and filter() Methods
Another option for grouping an array is to use the map() and filter() functions together. When dealing with complex data structures, this approach allows additional flexibility.
const data = [
{ category: 'fruit', name: 'apple', color: 'red' },
{ category: 'vegetable', name: 'carrot', color: 'orange' },
{ category: 'fruit', name: 'banana', color: 'yellow' },
{ category: 'vegetable', name: 'lettuce', color: 'green' }
];
const groupedData = [...new Set(data.map(item => item.category))].map(category => ({
category,
items: data.filter(item => item.category === category)
}));
console.log(groupedData);
Output:
[
{ category: 'fruit', items: [{ name: 'apple', color: 'red' }, { name: 'banana', color: 'yellow' }] },
{ category: 'vegetable', items: [{ name: 'carrot', color: 'orange' }, { name: 'lettuce', color: 'green' }] }
]
3. Using Lodash Library
Lodash is a popular utility package that offers a variety of functions to make array manipulation easier.
Lodash’s groupBy() function can be used to group entries in an array based on specified attributes.
const _ = require('lodash');
const data = [
{ category: 'book', name: 'World of JAVASCRIPT' },
{ category: 'language', name: 'Javascript' },
{ category: 'book', name: 'WORLD of JAVA' },
{ category: 'language', name: 'JAVA' }
];
const groupedData = _.groupBy(data, 'category');
console.log(groupedData);
Output:
{
book: [
{ category: 'book', name: 'World of JAVASCRIPT' },
{ category: 'book', name: 'WORLD of JAVA' }
],
language: [
{ category: 'language', name: 'JAVASCRIPT' },
{ category: 'language', name: 'JAVA' }
]
}
4. Creating a Custom Grouping Function
If you prefer a more customized approach, you can create a function that groups the array elements based on your specific requirements.
function customGroupBy(arr, key) {
return arr.reduce((acc, item) => {
const category = item[key];
if (!acc[category]) {
acc[category] = [];
}
acc[category].push(item);
return acc;
}, {});
}
const data = [
{ category: 'book', name: 'World of JAVASCRIPT' },
{ category: 'language', name: 'Javascript' },
{ category: 'book', name: 'WORLD of JAVA' },
{ category: 'language', name: 'JAVA' }
];
const groupedData = customGroupBy(data, 'category');
console.log(groupedData);
Output:
{
book: [
{ category: 'book', name: 'World of JAVASCRIPT' },
{ category: 'book', name: 'WORLD of JAVA' }
],
language: [
{ category: 'language', name: 'JAVASCRIPT' },
{ category: 'language', name: 'JAVA' }
]
}5. Grouping Array of Objects with Multiple Criteria
In some cases, you may need to group an array of objects based on multiple criteria. You can achieve this by combining different grouping techniques and leveraging JavaScript’s flexibility.
const data = [
{ category: 'fruit', name: 'apple', color: 'red' },
{ category: 'vegetable', name: 'carrot', color: 'orange' },
{ category: 'fruit', name: 'banana', color: 'yellow' },
{ category: 'vegetable', name: 'lettuce', color: 'green' }
];
const groupedData = data.reduce((acc, item) => {
const key = `${item.category}_${item.color}`;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(item.name);
return acc;
}, {});
console.log(groupedData);
Output:
{
fruit_red: ['apple'],
vegetable_orange: ['carrot'],
fruit_yellow: ['banana'],
vegetable_green: ['lettuce']
}Nevertheless, here are other functions you can learn to enhance your JavaScript skills.
- What is Javascript init function? How it Works?
- What is Javascript file naming conventions?
- Is JavaScript similar to Java? What’s the difference?
Conclusion
In conclusion, grouping arrays in JavaScript is a powerful technique that allows you to organize and manipulate data efficiently. By grouping array elements based on specific criteria or attributes, you can perform various data analysis, filtering, and display tasks in a more organized manner.