Adding values to an object property from another object with the identical definition in JavaScript

Question

Adding values to an object property from another object with the identical definition in JavaScript

I have two different objects that look like this:

var obj1 = {
  fparams: {
    keys: ['a', 'b'],
    pairs: {
      'p': 'qwert'
    }
  },
  qparams: {
    'x': 'xyz'
  }
}

And the second object is:

var obj2 = {
  fparams: {
    keys: ['c', 'd'],
    pairs: {
      'q': 'yuiop'
    }
  },
  qparams: {
    'z': 'zyx'
  }
}

How can I merge the properties from obj2 into obj1?

While working in Angular, I attempted using angular.merge(obj1,obj2), however it didn't merge the 'keys' array, instead replaced it with the values from obj2. Other properties were merged successfully.

This is the desired outcome:

var obj2 = {
  fparams: {
    keys: ['a', 'b', 'c', 'd'],
    pairs: {
      'p': 'qwert',
      'q': 'yuiop'
    }
  },
  qparams: {
    'x': 'xyz',
    'y': 'zyx'
  }
}

The version of Angular I'm using is angular 1.5.8.

Edit : I eventually switched to lodash because it was more convenient to work with and offered many functionalities that I wasn't aware of previously.

javascript angularjs arrays object key-value

Answer 1

Answer №1

Have you thought about leveraging the power of Underscore.js? It offers a handy extend function that achieves the same result.

Answer 2

Have you thought about leveraging the power of Underscore.js? It offers a handy extend function that achieves the same result.

Answer 3

Answer №2

Using pure JS and the recursive function mergeObjects, you can combine objects like this:

function mergeObjects(obj1, obj2){
  return Object.keys(obj1)
               .reduce(function(result, key){
                         if(Array.isArray(obj1[key])){
                           obj1[key] = obj1[key].concat(obj2[key]);
                         } else if(typeof obj1[key] === "object"){
                           obj1[key] = mergeObjects(obj1[key], obj2[key]);
                         } else {
                           result = Object.assign({}, obj1, obj2);
                         }
                         return result;
                       }, obj1);
}

var objects = [{
             firstParams: {
                         keys : ['a', 'b'],
                         pairs: {
                                 'p': 'qwert'
                                }
                        },
             queryParameters: {
                               'x': 'xyz'
                              }
            },
            {
             firstParams: {
                         keys : ['c', 'd'],
                         pairs: {
                                 'q': 'yuiop'
                                }
                         },
             queryParameters: {
                               'z': 'zyx'
                              }
            }],
  mergedResult = objects.reduce(mergeObjects);
console.log(JSON.stringify(mergedResult,null,2));

Answer 4

Using pure JS and the recursive function mergeObjects, you can combine objects like this:

function mergeObjects(obj1, obj2){
  return Object.keys(obj1)
               .reduce(function(result, key){
                         if(Array.isArray(obj1[key])){
                           obj1[key] = obj1[key].concat(obj2[key]);
                         } else if(typeof obj1[key] === "object"){
                           obj1[key] = mergeObjects(obj1[key], obj2[key]);
                         } else {
                           result = Object.assign({}, obj1, obj2);
                         }
                         return result;
                       }, obj1);
}

var objects = [{
             firstParams: {
                         keys : ['a', 'b'],
                         pairs: {
                                 'p': 'qwert'
                                }
                        },
             queryParameters: {
                               'x': 'xyz'
                              }
            },
            {
             firstParams: {
                         keys : ['c', 'd'],
                         pairs: {
                                 'q': 'yuiop'
                                }
                         },
             queryParameters: {
                               'z': 'zyx'
                              }
            }],
  mergedResult = objects.reduce(mergeObjects);
console.log(JSON.stringify(mergedResult,null,2));

Answer 5

Answer №3

When working with lodash, the mergeWith function comes in handy for achieving the desired outcome. Specifically, when dealing with array values, concatenating them is necessary.

var obj1 = {"fparams":{"keys":["a","b"],"pairs":{"p":"qwert"}},"qparams":{"x":"xyz"}}
var obj2 = {"fparams":{"keys":["c","d"],"pairs":{"q":"yuiop"}},"qparams":{"z":"zyx"}}

var result = _.mergeWith(obj1, obj2, function(a, b) {
  if(_.isArray(a)) return a.concat(b)
})

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

Here is an attempt at deep merging through recursion. While this approach may not work on all data structures, it showcases a different method of merging objects.

var obj1 = {"fparams":{"keys":["a","b"],"pairs":{"p":"qwert"}},"qparams":{"x":"xyz"}}
var obj2 = {"fparams":{"keys":["c","d"],"pairs":{"q":"yuiop"}},"qparams":{"z":"zyx"}}

function merge(o1, o2) {
  var result = {}
  for (var i in o1) {
    for (var j in o2) {
      if (i == j && typeof o1[i] == 'object' && typeof o2[j] == 'object') {
        if (Array.isArray(o1[i]) || Array.isArray(o2[j])) {
          result[i] = Array.isArray(o1[i]) ? o1[i].concat(o2[j]) : o2[j].concat(o1[i])
        } else {
          result[i] = Object.assign(result[i] || {}, merge(o1[i], o2[j]))
        }
      }
      if (typeof o1[i] != 'object' || typeof o2[j] != 'object') {
        result[i] = o1[i]
        result[j] = o2[j]
      }

    }
  }
  return result;
}

console.log(JSON.stringify(merge(obj1, obj2), 0, 4))

Answer 6

When working with lodash, the mergeWith function comes in handy for achieving the desired outcome. Specifically, when dealing with array values, concatenating them is necessary.

var obj1 = {"fparams":{"keys":["a","b"],"pairs":{"p":"qwert"}},"qparams":{"x":"xyz"}}
var obj2 = {"fparams":{"keys":["c","d"],"pairs":{"q":"yuiop"}},"qparams":{"z":"zyx"}}

var result = _.mergeWith(obj1, obj2, function(a, b) {
  if(_.isArray(a)) return a.concat(b)
})

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

Here is an attempt at deep merging through recursion. While this approach may not work on all data structures, it showcases a different method of merging objects.

var obj1 = {"fparams":{"keys":["a","b"],"pairs":{"p":"qwert"}},"qparams":{"x":"xyz"}}
var obj2 = {"fparams":{"keys":["c","d"],"pairs":{"q":"yuiop"}},"qparams":{"z":"zyx"}}

function merge(o1, o2) {
  var result = {}
  for (var i in o1) {
    for (var j in o2) {
      if (i == j && typeof o1[i] == 'object' && typeof o2[j] == 'object') {
        if (Array.isArray(o1[i]) || Array.isArray(o2[j])) {
          result[i] = Array.isArray(o1[i]) ? o1[i].concat(o2[j]) : o2[j].concat(o1[i])
        } else {
          result[i] = Object.assign(result[i] || {}, merge(o1[i], o2[j]))
        }
      }
      if (typeof o1[i] != 'object' || typeof o2[j] != 'object') {
        result[i] = o1[i]
        result[j] = o2[j]
      }

    }
  }
  return result;
}

console.log(JSON.stringify(merge(obj1, obj2), 0, 4))

Answer 7

Answer №4

Here is a custom function that attempts to handle various scenarios, although it may not be as robust as other available libraries:

var combineObjects = function(object1, object2) {
  for (var key in object2) {
    if (object2.hasOwnProperty(key)) {
       if (object1[key] == null) {
           object1[key] = object2[key];
       } else if (object1[key] instanceof Array) {
           if (object2[key] instanceof Array) {
               for (var i = 0; i < object2[key].length; i++) {
                   if (object1[key].indexOf(object2[key]) === -1) {
                       object1[key].push(object2[key][i]);
                   }
               }
           }
       } else if (object1[key] instanceof Object && object2[key] instanceof Object && object1[key].constructor == Object && object2[key] == Object) {
           combineObjects(object1[key], object2[key]);
       }
    }
  }
}

To use this function, you can simply call it with the two objects you want to merge:

combineObjects(object1, object2);

Answer 8

Here is a custom function that attempts to handle various scenarios, although it may not be as robust as other available libraries:

var combineObjects = function(object1, object2) {
  for (var key in object2) {
    if (object2.hasOwnProperty(key)) {
       if (object1[key] == null) {
           object1[key] = object2[key];
       } else if (object1[key] instanceof Array) {
           if (object2[key] instanceof Array) {
               for (var i = 0; i < object2[key].length; i++) {
                   if (object1[key].indexOf(object2[key]) === -1) {
                       object1[key].push(object2[key][i]);
                   }
               }
           }
       } else if (object1[key] instanceof Object && object2[key] instanceof Object && object1[key].constructor == Object && object2[key] == Object) {
           combineObjects(object1[key], object2[key]);
       }
    }
  }
}

To use this function, you can simply call it with the two objects you want to merge:

combineObjects(object1, object2);

Adding values to an object property from another object with the identical definition in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to trigger a function (or directive) specifically when a tab is chosen in AngularJS?

What is the best way to arrange an array of objects based on a specific condition

Anticipate the resolution of a promise in javascript & graphql/node

Guide to assigning a string resource as the name of a string array

The ng-include directive in Angular seems to be malfunctioning when trying to include the intended link

Only scroll the div if it is not within the visible window

Prop validation error: prop type mismatch occurred

Steering clear of ng-include while still maintaining versatility in displaying sub-templates

How to retrieve the outcome of a stored procedure using node.js

Should JavaScript be referenced at the start or generated dynamically?

The conventional method for including React import statements

Is there a way to retrieve all elements from an array by using the .fetch method?

Encountering a 404 error while attempting to upload files with multer in node.js

What are some strategies for resolving a parse error in a JSON file?

Multiple 'keydown' events are accumulating with Ajax activated

jQuery: Gallerific Partially Functioning

Shiny Exterior using ThreeJS

Passing the unique identifier of a record in NextJS to a function that triggers a modal display

Storing Polygon Coordinates (GeoJSON) in a MongoDB Database with NodeJS and Mongoose: Step-by-Step Guide

Using CKEditor in an AngularJS web application: Tips and tricks