How to group JSON data in JavaScript?

Grouping JSON data in JavaScript involves organizing objects by a common property. This is useful when you need to categorize data or create summary reports from complex datasets.

Basic Grouping with for...in Loop

The traditional approach uses a for...in loop to iterate through object keys and group items by a specific property:

var details = {
    "1": {
        name: "John"
    },
    "2": {
        name: "John"
    },
    "3": {
        name: "David"
    }
};

var objectWithGroupByName = {};
for (var key in details) {
    var name = details[key].name;
    if (!objectWithGroupByName[name]) {
        objectWithGroupByName[name] = [];
    }
    objectWithGroupByName[name].push(details[key]);
}

console.log(objectWithGroupByName);

{
  John: [ { name: 'John' }, { name: 'John' } ],
  David: [ { name: 'David' } ]
}

Grouping Array Data with reduce()

When working with arrays of objects, the reduce() method provides a more functional approach:

var users = [
    { id: 1, name: "John", department: "IT" },
    { id: 2, name: "Alice", department: "HR" },
    { id: 3, name: "Bob", department: "IT" },
    { id: 4, name: "Carol", department: "HR" }
];

var groupedByDepartment = users.reduce((groups, user) => {
    var department = user.department;
    if (!groups[department]) {
        groups[department] = [];
    }
    groups[department].push(user);
    return groups;
}, {});

console.log(groupedByDepartment);

{
  IT: [
    { id: 1, name: 'John', department: 'IT' },
    { id: 3, name: 'Bob', department: 'IT' }
  ],
  HR: [
    { id: 2, name: 'Alice', department: 'HR' },
    { id: 4, name: 'Carol', department: 'HR' }
  ]
}

Generic Grouping Function

Create a reusable function to group by any property:

function groupBy(array, key) {
    return array.reduce((groups, item) => {
        var group = item[key];
        if (!groups[group]) {
            groups[group] = [];
        }
        groups[group].push(item);
        return groups;
    }, {});
}

var products = [
    { name: "Laptop", category: "Electronics", price: 1000 },
    { name: "Book", category: "Education", price: 20 },
    { name: "Phone", category: "Electronics", price: 800 },
    { name: "Pen", category: "Education", price: 5 }
];

console.log(groupBy(products, 'category'));
console.log(groupBy(products, 'price'));

{
  Electronics: [
    { name: 'Laptop', category: 'Electronics', price: 1000 },
    { name: 'Phone', category: 'Electronics', price: 800 }
  ],
  Education: [
    { name: 'Book', category: 'Education', price: 20 },
    { name: 'Pen', category: 'Education', price: 5 }
  ]
}
{
  '5': [ { name: 'Pen', category: 'Education', price: 5 } ],
  '20': [ { name: 'Book', category: 'Education', price: 20 } ],
  '800': [ { name: 'Phone', category: 'Electronics', price: 800 } ],
  '1000': [ { name: 'Laptop', category: 'Electronics', price: 1000 } ]
}

Comparison of Methods

Conclusion

Use for...in loops for simple object grouping or Array.reduce() for arrays. Creating a generic grouping function improves code reusability and maintainability.