Merge two dynamic object arrays: Merge two dynamic object arrays into one

Question

I have a dynamic array of two objects as shown below (this is a dynamic array of n objects):

serverArray = [
    {"id":"field1","mandatory":false,"visible":false},
    {"id":"field2","mandatory":false,"visible":false},
    {"id":"field3","mandatory":false,"visible":false},
    {"id":"field4","mandatory":false,"visible":false}
]

localArray = [
    {"id":"field1"},
    {"id":"field2","mandatory":false},
    {"id":"field3","mandatory":true,"visible":false},
    {"id":"field4","mandatory":false,"visible":true},
    {"id":"field5","mandatory":false,"visible":true},
    {"id":"field6","mandatory":true,"visible":false},
]

I merged the two arrays into an object with the same ID like this:

for (let x = 0; x < serverArray.length; x ) {
    for (let y = 0; y < localArray.length; y ) {
        if (serverArray[x].id == localArray[y].id) { // serverArray[x].id/localArray[y].id = 'field1', 'field2'
            for (let key in localArray[y]) { //key = 'id', 'mandatory', etc
                serverArray[x][key] = localArray[y].hasOwnProperty(key) ? localArray[y][key] : serverArray[x][key]; //Override with local field attribute value (if present) in final returned response
            }
        }
    }
}

However, I also want to include in the final serverArray those IDs that are not in serverArray (i.e. field5, field6), and these fields will also fail the above condition (i.e. serverArray[x].id == localArray[y].id), I hope These fields are also included as part of the final serverArray, i.e. my final serverArray should also contain the following two objects:

{"id":"field5","mandatory":false,"visible":true},
{"id":"field6","mandatory":true,"visible":false},

Is there any way to achieve this requirement?

Answer 1

When looping through the two arrays, you can create a new object to keep track of the merged fields. After the initial merge, you can iterate over the localArray again to identify fields that have not yet been merged into the serverArray and add them to the merged result.

let mergedFields = {};

// 根据共同的ID进行初始合并
for (let y = 0; y < localArray.length; y++) {
    const localField = localArray[y];
    const serverField = serverArray.find(field => field.id === localField.id);

    if (serverField) {
        mergedFields[localField.id] = {
            ...serverField,
            ...localField
        };
    } else {
        mergedFields[localField.id] = localField;
    }
}

// 添加在mergedFields中不存在的剩余localArray字段
for (let y = 0; y < localArray.length; y++) {
    const localField = localArray[y];
    if (!mergedFields.hasOwnProperty(localField.id)) {
        mergedFields[localField.id] = localField;
    }
}

// 将mergedFields对象转换回数组
const mergedServerArray = Object.values(mergedFields);

console.log(mergedServerArray);