How to merge array objects with the same ID by type and allocate amounts using JavaScript?

This article describes how to use JavaScript to process an array, merge objects with the same ID into a new object, and allocate the amount to different fields according to different types (breakfast, Chinese, dinner).

Suppose we have an array of multiple objects, each with id , jine (amount) and type (type) fields. The goal is to convert these data into another format, where the data corresponding to each id is merged into one object, and jine value is assigned to jine1 (breakfast), jine2 (Chinese food), and jine3 (dinner) fields according to type .

Raw data:

 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 format:

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

To achieve this, we can use the reduce method to iterate over the array and create a new object to store the results.

Solution:

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

console.log(result); // output array in target format

This code first uses the reduce method to convert the original array into an object, the key is id , and the value is an object containing jine1 , jine2 , and jine3 . Then use the Object.values ​​method to convert the object into an array. In the reduce method, we check whether the current id exists in acc , if it does not exist, create a new object, and assign jine value to the corresponding field according to type .

This method avoids the use of Object.groupBy and find methods, improves the readability and efficiency of the code, and handles data merging and amount allocation more directly. It is also more robust because there is no need to deal with cases where find method may return undefined .

The above is the detailed content of How to merge array objects with the same ID by type and allocate amounts using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!