Group Similar Items in JSON in JavaScript

Suppose, we have a JSON Array that contains data about some tickets like this:

const arr = [
    {
        "quantity": "1",
        "description": "VIP Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "VIP Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "VIP Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "Regular Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "Regular Ticket to Event"
    },
];

console.log("Original array:", arr);

Original array: [
  { quantity: '1', description: 'VIP Ticket to Event' },
  { quantity: '1', description: 'VIP Ticket to Event' },
  { quantity: '1', description: 'VIP Ticket to Event' },
  { quantity: '1', description: 'Regular Ticket to Event' },
  { quantity: '1', description: 'Regular Ticket to Event' }
]

We are required to write a JavaScript function that takes in one such array. The function should group similar objects together and sum up their quantity property.

Two objects will be considered similar if they have identical values for the "description" property.

Using forEach with Custom Context

This approach uses `forEach` with a custom context object to track grouped items:

const arr = [
    {
        "quantity": "1",
        "description": "VIP Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "VIP Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "VIP Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "Regular Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "Regular Ticket to Event"
    },
];

const groupAndAdd = arr => {
    const res = [];
    arr.forEach(function(el) {
        if (!this[el.description]) {
            this[el.description] = {
                description: el.description, 
                quantity: 0
            };
            res.push(this[el.description]);
        }
        this[el.description].quantity += +el.quantity;
    }, {});
    return res;
}

console.log(groupAndAdd(arr));

[
  { description: 'VIP Ticket to Event', quantity: 3 },
  { description: 'Regular Ticket to Event', quantity: 2 }
]

Using reduce() Method (Alternative Approach)

A more modern approach using the `reduce()` method:

const arr = [
    {
        "quantity": "1",
        "description": "VIP Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "VIP Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "VIP Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "Regular Ticket to Event"
    },
    {
        "quantity": "1",
        "description": "Regular Ticket to Event"
    },
];

const groupAndAddReduce = arr => {
    const grouped = arr.reduce((acc, item) => {
        const key = item.description;
        if (!acc[key]) {
            acc[key] = { description: key, quantity: 0 };
        }
        acc[key].quantity += parseInt(item.quantity);
        return acc;
    }, {});
    
    return Object.values(grouped);
}

console.log(groupAndAddReduce(arr));

[
  { description: 'VIP Ticket to Event', quantity: 3 },
  { description: 'Regular Ticket to Event', quantity: 2 }
]

Comparison of Approaches

How It Works

Both methods work by:

• Creating a temporary object to track unique descriptions
• For each item, checking if the description already exists
• If new, creating a new grouped object with quantity 0
• Adding the current quantity to the grouped object
• Converting quantities from strings to numbers using `+` or `parseInt()`

Conclusion

Both approaches effectively group JSON objects by description and sum quantities. The `reduce()` method is more modern and functional, while `forEach` with context offers fine-grained control over the grouping process.