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

Using the POST method in Node.js is not functioning properly on the Replit server when using express

Display data fetched from concurrent Ajax calls in a React Component

Pass function A as a prop, then trigger a different function when the child function calls A

Tips for resolving the 'node is not defined' error in the case of passing a default value

Utilizing the protractor tool to navigate through menu options and access submenus efficiently

Having trouble displaying specific images on React Native, how can I resolve this issue?

Showing data from a Node.js Express application in a Jade template file

The lack of functionality for lockOrientation in Cordova is causing issues

Sequential tests in the browser, not parallel

Using Javascript, send text from a textbox to an ActionResult in ASP.NET MVC using AJAX

Vue.js is not incrementing the counter as expected

Compilation errors plague TSC on varying systems

Launch a new window with the window.open() method and execute a function on the newly opened window

In Node.js, use the `[]` operator to select elements from an array of strings without including

Can we stub these types of functions in any manner?

Display scroll bars over the position:absolute header

Issue with CasperJS: The function this.waitForUrl is not defined and is causing an error

What could be the reason for the checkbox being toggled twice?

Having trouble with understanding the usage of "this" in nodejs/js when using it after a callback function within setTimeout

The tabbed menu should remain selected until the user switches to another menu option