Question 232035 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Merge two dynamic arrays of objects

I have two dynamic arrays of objects as 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 merge these 2 arrays for the ones with common IDs as below:

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, what I also want is for the IDs which are not present in serverArray (i.e. field5, field6 in the above example) and which would fail the above condition (i.e. serverArray[x].id == localArray[y].id), I want these fields also as part of my final serverArray, i.e. in my final serverArray it should also have the below 2 objects:

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

Is there a way to achieve the same?

Tags:

2

Answers


  1. 0

    You can create a new object to keep track of merged fields while looping through both arrays. After the initial merge, you can loop through the localArray again to identify fields that are not yet merged into the serverArray and add them to the merged result.

    let mergedFields = {};

// Initial merge based on common IDs
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;
    }
}

// Add remaining localArray fields not present in mergedFields
for (let y = 0; y < localArray.length; y++) {
    const localField = localArray[y];
    if (!mergedFields.hasOwnProperty(localField.id)) {
        mergedFields[localField.id] = localField;
    }
}

// Convert mergedFields object back to an array
const mergedServerArray = Object.values(mergedFields);

console.log(mergedServerArray);
    Login or Signup to reply.
  2. 0

    Instead of using iteration to find a match by id, first create a dictionary so you can access the server objects by their id in O(1) time.

    Secondly, the inner loop over the keys can be replaced by a call to Object.assign.

    To add missing objects, first check in the above dictionary if the key didn’t occur yet, and then push the local object to the server array:

    const 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}]
const 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},]

const dict = Object.fromEntries(serverArray.map(obj => [obj.id, obj]));
for (const obj of localArray) {
    if (dict[obj.id]) Object.assign(dict[obj.id], obj);
    else {
        serverArray.push(obj);
        dict[obj.id] = obj; // Only needed if you expect duplicate id in localArray
    }
}

console.log(serverArray);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search