How to merge array elements with the same ID into one object using JavaScript?

JavaScript array element merging: Merge elements with the same ID into one object

In data processing, it is often necessary to merge array elements with the same ID into a single object. This article provides a JavaScript solution to convert array elements with the same ID but different attributes into a new array format.

Original data format:

 const list = [
    { id: "202301", jine: 23, type: "Dinner" },
    { id: "202301", jine: 87.5, type: "Breakfast" },
    { id: "202301", jine: 1065.5, type: "Chinese food" },
    { id: "202302", jine: 10, type: "Dinner" },
    { id: "202302", jine: 181.5, type: "Breakfast" },
    { id: "202302", jine: 633.5, type: "Chinese food" }
];

Target data format:

 const targetList = [
    { id: "202301", jine1: 87.5, jine2: 1065.5, jine3: 23 },
    { id: "202302", jine1: 181.5, jine2: 633.5, jine3: 10 }
];

Solution:

We will use the reduce method to implement data conversion. This method iterates over the array and accumulates each element into a result object.

 const result = Object.values(list.reduce((acc, curr) => {
    const { id, jine, type } = curr;
    if (!acc[id]) {
        acc[id] = { id };
    }
    switch (type) {
        case 'breakfast': acc[id].jine1 = jine; break;
        case 'Chinese food': acc[id].jine2 = jine; break;
        case 'dinner': acc[id].jine3 = jine; break;
    }
    return acc;
}, {}));

console.log(result); // Output target data format

Code explanation:

1. reduce method: The reduce method iterates over list array and accumulates each element into an object acc .
2. acc[id] : Use id as key to store data into acc object. If id does not exist, a new object is created.
3. switch statement: Assign the jine value to jine1 , jine2 or jine3 according to the value of type attribute.
4. Object.values : Finally, use the Object.values ​​method to convert the acc object into an array to obtain the target data format.

This method is clear and concise, avoiding the use of external libraries, and directly using JavaScript built-in methods to implement data conversion. It's also easier to scale, if you need to deal with more types of dining, just add more case in the switch statement.

The above is the detailed content of How to merge array elements with the same ID into one object using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!