Search and update array based on key JavaScript

In JavaScript, you often need to merge data from two arrays based on a common property. This is useful when you have reference data in one array and need to enrich objects in another array.

Consider these two arrays:

let arr1 = [
    {"LEVEL":4,"POSITION":"RGM"},
    {"LEVEL":5,"POSITION":"GM"},
    {"LEVEL":5,"POSITION":"GMH"}
];

let arr2 = [
    {"EMAIL":"test1@stc.com","POSITION":"GM"},
    {"EMAIL":"test2@stc.com","POSITION":"GMH"},
    {"EMAIL":"test3@stc.com","POSITION":"RGM"},
    {"EMAIL":"test3@CSR.COM.AU","POSITION":"GM"}
];

console.log("Original arr2:", arr2);

Original arr2: [
  { EMAIL: 'test1@stc.com', POSITION: 'GM' },
  { EMAIL: 'test2@stc.com', POSITION: 'GMH' },
  { EMAIL: 'test3@stc.com', POSITION: 'RGM' },
  { EMAIL: 'test3@CSR.COM.AU', POSITION: 'GM' }
]

We need to add the LEVEL property to each object in arr2 by matching the POSITION field with arr1.

Using forEach and findIndex

This approach modifies the original array by iterating through each object and finding the matching position:

let arr1 = [
    {"LEVEL":4,"POSITION":"RGM"},
    {"LEVEL":5,"POSITION":"GM"},
    {"LEVEL":5,"POSITION":"GMH"}
];

let arr2 = [
    {"EMAIL":"test1@stc.com","POSITION":"GM"},
    {"EMAIL":"test2@stc.com","POSITION":"GMH"},
    {"EMAIL":"test3@stc.com","POSITION":"RGM"},
    {"EMAIL":"test3@CSR.COM.AU","POSITION":"GM"}
];

const formatArray = (first, second) => {
    second.forEach((el, index) => {
        const ind = first.findIndex(item => item["POSITION"] === el["POSITION"]);
        if(ind !== -1){
            second[index]["LEVEL"] = first[ind]["LEVEL"];
        }
    });
};

formatArray(arr1, arr2);
console.log(arr2);

[
  { EMAIL: 'test1@stc.com', POSITION: 'GM', LEVEL: 5 },
  { EMAIL: 'test2@stc.com', POSITION: 'GMH', LEVEL: 5 },
  { EMAIL: 'test3@stc.com', POSITION: 'RGM', LEVEL: 4 },
  { EMAIL: 'test3@CSR.COM.AU', POSITION: 'GM', LEVEL: 5 }
]

Using map for Immutable Approach

For a functional programming approach that doesn't modify the original array:

let arr1 = [
    {"LEVEL":4,"POSITION":"RGM"},
    {"LEVEL":5,"POSITION":"GM"},
    {"LEVEL":5,"POSITION":"GMH"}
];

let arr2 = [
    {"EMAIL":"test1@stc.com","POSITION":"GM"},
    {"EMAIL":"test2@stc.com","POSITION":"GMH"},
    {"EMAIL":"test3@stc.com","POSITION":"RGM"}
];

const mergeArrays = (reference, target) => {
    return target.map(item => {
        const match = reference.find(ref => ref.POSITION === item.POSITION);
        return match ? {...item, LEVEL: match.LEVEL} : item;
    });
};

const result = mergeArrays(arr1, arr2);
console.log(result);

[
  { EMAIL: 'test1@stc.com', POSITION: 'GM', LEVEL: 5 },
  { EMAIL: 'test2@stc.com', POSITION: 'GMH', LEVEL: 5 },
  { EMAIL: 'test3@stc.com', POSITION: 'RGM', LEVEL: 4 }
]

Performance Comparison

Conclusion

Both approaches effectively merge arrays based on a common key. Use forEach for in-place updates or map for creating new arrays while preserving the original data structure.