Regroup JSON array in JavaScript

Suppose, we have a JSON array of objects like this −

const arr = [
    {
        "id": "03868185",
        "month_10": 6,
    },
    {
        "id": "03870584",
        "month_6": 2,
    },
    {
        "id": "03870584",
        "month_7": 5,
    },
    {
        "id": "51295",
        "month_1": 1,
    },
    {
        "id": "51295",
        "month_10": 1,
    },
    {
        "id": "55468",
        "month_11": 1,
    }
];

Here, we can see that the same "id" property is being repeated in some objects. We are required to write a JavaScript function that takes in one such array and groups all the key/value pairs for a specific "id" property into one single object.

Using forEach and Object Mapping

The code for this will be −

const arr = [
    {
        "id": "03868185",
        "month_10": 6,
    },
    {
        "id": "03870584",
        "month_6": 2,
    },
    {
        "id": "03870584",
        "month_7": 5,
    },
    {
        "id": "51295",
        "month_1": 1,
    },
    {
        "id": "51295",
        "month_10": 1,
    },
    {
        "id": "55468",
        "month_11": 1,
    }
];

const groupById = (arr = []) => {
    const map = {};
    const res = [];
    arr.forEach(el => {
        if(map.hasOwnProperty(el['id'])){
            const index = map[el['id']] - 1;
            const key = Object.keys(el)[1];
            res[index][key] = el[key];
        }
        else{
            map[el['id']] = res.push(el);
        }
    })
    return res;
};

console.log(groupById(arr));

[
    { id: '03868185', month_10: 6 },
    { id: '03870584', month_6: 2, month_7: 5 },
    { id: '51295', month_1: 1, month_10: 1 },
    { id: '55468', month_11: 1 }
]

Using reduce Method (Alternative Approach)

A more concise approach using the reduce method:

const groupByIdReduce = (arr = []) => {
    const grouped = arr.reduce((acc, obj) => {
        const id = obj.id;
        if (!acc[id]) {
            acc[id] = { id };
        }
        // Copy all properties except 'id' to the grouped object
        Object.keys(obj).forEach(key => {
            if (key !== 'id') {
                acc[id][key] = obj[key];
            }
        });
        return acc;
    }, {});
    
    // Convert object back to array
    return Object.values(grouped);
};

console.log(groupByIdReduce(arr));

[
    { id: '03868185', month_10: 6 },
    { id: '03870584', month_6: 2, month_7: 5 },
    { id: '51295', month_1: 1, month_10: 1 },
    { id: '55468', month_11: 1 }
]

How It Works

Both approaches follow the same logic:

• Iterate through the array of objects
• Check if an object with the same ID already exists
• If it exists, merge the properties into the existing object
• If it doesn't exist, create a new grouped object
• Return the array of grouped objects

Comparison

Conclusion

Both methods effectively group JSON array objects by ID, merging properties from duplicate entries. The reduce approach is more functional and readable, while the forEach method offers more explicit control over the grouping process.