Lodash is a popular JavaScript utility library that simplifies common tasks like manipulating arrays, objects, strings, and more. we will explore how to add our own keys for grouped output using the lodash _.groupBy() function. This is very useful when we need to categorize data dynamically based on custom criteria like grouping people by age range, orders by status, or products by price range.
Approach
In this approach, we have defined the sample array of objects that contains data (e.g., name and age ), that are grouped together. We then create a function, groupedByAgeGroup(), which uses Lodash's _.groupBy() function, this function will group the data based on custom keys, such as age ranges or any other criteria. After that, you can use JavaScript to reference an HTML div or container where you want to display the grouped data.
Example: This example shows how to add your own keys for grouped output using lodash _.groupBy().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Use of GroupBy() method</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
width: 100%;
text-align: center;
}
h1 {
color: #1ae375;
margin-bottom: 20px;
}
.group {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}
.group h3 {
margin: 0;
color: #555;
font-size: 1.2em;
}
.person {
margin-top: 5px;
color: #666;
}
footer {
margin-top: 20px;
font-size: 0.9em;
color: #101010;
}
</style>
</head>
<body>
<div class="container">
<h1>People Grouped by Age Range</h1>
<div id="output"></div>
<footer>Grouped using Lodash's
<code>
groupBy()
</code>
function
</footer>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js">
</script>
<script>
// Sample data
const people = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 20 },
{ name: 'Charlie', age: 35 },
{ name: 'David', age: 42 },
{ name: 'Eve', age: 25 },
{ name: 'Frank', age: 20 },
{ name: 'Grace', age: 35 },
];
// Group by custom age group (20-29, 30-39, 40+)
const groupedByAgeGroup = _.groupBy(people, person => {
if (person.age >= 20 && person.age <= 29) {
return 'Age Group: 20-29';
} else if (person.age >= 30 && person.age <= 39) {
return 'Age Group: 30-39';
} else {
return 'Age Group: 40+';
}
});
// Display grouped output in the container
const outputDiv = document.getElementById('output');
// Iterate over each group and display
Object.keys(groupedByAgeGroup).forEach(group => {
const groupDiv = document.createElement('div');
groupDiv.classList.add('group');
const groupTitle = document.createElement('h3');
groupTitle.textContent = group;
groupDiv.appendChild(groupTitle);
groupedByAgeGroup[group].forEach(person => {
const personDiv = document.createElement('div');
personDiv.classList.add('person');
personDiv.textContent = `${person.name} (Age: ${person.age})`;
groupDiv.appendChild(personDiv);
});
outputDiv.appendChild(groupDiv);
});
</script>
</body>
</html>
Output:
