What is the best way to merge arrays within two objects and combine them together?

Question

What is the best way to merge arrays within two objects and combine them together?

I am facing an issue where I have multiple objects with the same properties and want to merge them based on a common key-value pair at the first level. Although I know about using the spread operator like this:

const obj3 = {...obj1, ...obj2}

The problem arises when there are arrays inside the objects that end up getting overwritten instead of being merged seamlessly.


{
  "id": 1,
  "name": "firstLevel",
  "visible": true,
  "subCategories": [
    {
      "id": 2,
      "name": "secondLevel",
      "visible": true,
      "skills": [
        {
          "name": "foo",
          "id": 5,
          "visible": true
        }
      ]
    }
  ]
}


{
  "id": 1,
  "name": "firstLevel",
  "visible": true,
  "subCategories": [
    {
      "id": 2,
      "name": "secondLevel",
      "visible": true,
      "skills": [
        {
          "name": "bar",
          "id": 1,
          "visible": true
        }
      ]
    }
  ]
}

My desired outcome is for the objects to combine in such a way that the arrays within them get merged, resulting in:


{
  "id": 1,
  "name": "firstLevel",
  "visible": true,
  "subCategories": [
    {
      "id": 2,
      "name": "secondLevel",
      "visible": true,
      "skills": [
        {
          "name": "foo",
          "id": 5,
          "visible": true
        },
        {
          "name": "bar",
          "id": 1,
          "visible": true
        }
      ]
    }
  ]
}

javascript typescript

Answer 1

Answer №1

If you need to combine arrays and plain object properties in a recursive manner, you should consider using lodash.mergeWith.

var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};

function customizer(objValue, srcValue) {
  if (_.isArray(objValue)) {
    return objValue.concat(srcValue);
  }
}
 
_.mergeWith(object, other, customizer);
// => { 'a': [{ 'b': 2 }, { 'c': 3 }, { 'd': 4 }, { 'e': 5 }] }

If you have specific object ids that you know beforehand, this customizer function can be utilized as needed.

function customizer(objValue, srcValue) {
  if (_.isArray(objValue)) {
    for (const srcItem of srcValue) {
      const objItem = objValue.filter(item => item.id === srcItem.id);
      if (objItem.length) {
        objValue = objValue.map(item => {
          if (item.id === objItem[0].id) {
            return _.mergeWith(item, srcItem, customizer);
          }

          return item;
        });
      } else {
        objValue = [...objValue, srcItem];
      }
    }

    return objValue;
  }
}

Answer 2

If you need to combine arrays and plain object properties in a recursive manner, you should consider using lodash.mergeWith.

var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};

function customizer(objValue, srcValue) {
  if (_.isArray(objValue)) {
    return objValue.concat(srcValue);
  }
}
 
_.mergeWith(object, other, customizer);
// => { 'a': [{ 'b': 2 }, { 'c': 3 }, { 'd': 4 }, { 'e': 5 }] }

If you have specific object ids that you know beforehand, this customizer function can be utilized as needed.

function customizer(objValue, srcValue) {
  if (_.isArray(objValue)) {
    for (const srcItem of srcValue) {
      const objItem = objValue.filter(item => item.id === srcItem.id);
      if (objItem.length) {
        objValue = objValue.map(item => {
          if (item.id === objItem[0].id) {
            return _.mergeWith(item, srcItem, customizer);
          }

          return item;
        });
      } else {
        objValue = [...objValue, srcItem];
      }
    }

    return objValue;
  }
}

What is the best way to merge arrays within two objects and combine them together?

Answer №1

Similar questions

What is the best way to generate script code dynamically on an HTML page depending on the environment?

Navigating programmatically to another page in Next.js can be easily achieved by utilizing the useRouter hook

Prevent form submission with jQuery during validation process

React - assigning a value to an input using JavaScript does not fire the 'onChange' event

Having difficulty accessing `props` in a React JS and Next JS application

Having trouble with firebase admin code completions not functioning properly in vscode?

Instead of using a string in the createTextNode() function, consider utilizing a variable

What separates the functions `useRef` and `createRef` from each other?

The dot notation in JSON syntax allows for easy access

Failed commitments in Protractor/WebDriverJS

Loop over elements retrieved from Firebase using ng-repeat

"Combining AngularJS with Material Design disrupts the functionality of infinite scroll

Activating a link without clicking will not trigger any javascript functions

Make sure to always select the alternative option in ajax

Trigger the jQuery function once the external URL loaded via AJAX is fully loaded

What is the procedure for turning off hover color on an href element?

What is the best method for clearing all session cookies in my React application?

Using RxJs in Angular, you can invoke an observable from within an error callback

Which is the optimal choice: subscribing from within a subscription or incorporating rxjs concat with tap?

Is there a way to automatically scroll the parent page's top when the user navigates within an iframe?