How to iterate an array of objects and build a new one in JavaScript ?

Suppose, we have an array of objects like this:

const arr = [
    {
        "customer": "Customer 1",
        "project": "1"
    },
    {
        "customer": "Customer 2",
        "project": "2"
    },
    {
        "customer": "Customer 2",
        "project": "3"
    }
];
console.log("Input array:", arr);

Input array: [
  { customer: 'Customer 1', project: '1' },
  { customer: 'Customer 2', project: '2' },
  { customer: 'Customer 2', project: '3' }
]

We need to write a JavaScript function that takes this array and groups projects by customer, creating a new transformed structure.

Using forEach() Method

The forEach() method iterates through each object and groups projects by customer:

const arr = [
    {
        "customer": "Customer 1",
        "project": "1"
    },
    {
        "customer": "Customer 2",
        "project": "2"
    },
    {
        "customer": "Customer 2",
        "project": "3"
    }
];

const groupCustomer = data => {
    const res = [];
    data.forEach(el => {
        let customer = res.filter(custom => {
            return el.customer === custom.customer;
        })[0];
        if(customer){
            customer.projects.push(el.project);
        }else{
            res.push({ customer: el.customer, projects: [el.project] });
        };
    });
    return res;
};

console.log(groupCustomer(arr));

[
  { customer: 'Customer 1', projects: [ '1' ] },
  { customer: 'Customer 2', projects: [ '2', '3' ] }
]

Using reduce() Method (Alternative)

A more functional approach using reduce() to build the grouped structure:

const arr = [
    {
        "customer": "Customer 1",
        "project": "1"
    },
    {
        "customer": "Customer 2",
        "project": "2"
    },
    {
        "customer": "Customer 2",
        "project": "3"
    }
];

const groupCustomerReduce = data => {
    return data.reduce((acc, item) => {
        let existing = acc.find(x => x.customer === item.customer);
        if (existing) {
            existing.projects.push(item.project);
        } else {
            acc.push({ customer: item.customer, projects: [item.project] });
        }
        return acc;
    }, []);
};

console.log(groupCustomerReduce(arr));

[
  { customer: 'Customer 1', projects: [ '1' ] },
  { customer: 'Customer 2', projects: [ '2', '3' ] }
]

How It Works

Both methods follow the same logic:

• Iterate through each object in the input array
• Check if a customer already exists in the result array
• If found, add the project to existing customer's projects array
• If not found, create a new entry with the customer and project

Comparison

Conclusion

Both forEach() and reduce() can effectively group array objects by a common property. The reduce() method is generally preferred for its functional programming approach and cleaner code structure.