Javascript objects merge

Question

I have two js objects

const first = { 
  obj1: { f11: "v11", f12: "v12" }, 
  obj2: { f21: "v21" } 
}

const second = { 
  obj1: { f11: "new_value" }, 
  obj3: { f: { ff: { fff: "v"} } } 
}

How can I update first javascript object only with object2's leaves values and get

const first = { 
  obj1: { f11: "new_value", f12: "v12" }, 
  obj2: { f21: "v21" },
  obj3: { f: { ff: { fff: "v"} } }  
}

UPD: I tried Object.assign but result is

const first = { 
  obj1: { f11: "new_value" }, 
  obj2: { f21: "v21" },
  obj3: { f: { ff: { fff: "v"} } }  
}

I loose some of internal fields

take a look at here https://stackoverflow.com/questions/10430279/extending-an-object-in-javascript — Álvaro Touzón, Jul 31 '17 at 06:10
Possible duplicate of [How to deep merge instead of shallow merge?](https://stackoverflow.com/questions/27936772/how-to-deep-merge-instead-of-shallow-merge) — Andrew Li, Jul 31 '17 at 06:15
@MohammadUsman A reason is that always prefer const. Mutability should be opt-in, and even though the source object may be mutated itself, const just means something can't be reassigned or redeclared, doesn't mean you can't mutate a property. — Andrew Li, Jul 31 '17 at 06:18
@AndrewLi thanks, `_.merge(first, second)` looks like that I need — dmitryvim, Jul 31 '17 at 06:26

score 1 · Answer 1 · answered Jul 31 '17 at 06:18

This requires deep merge. In jquery you can use $.extend.

Javascript equivalent is:

const first = { 
  obj1: { f11: "v11", f12: "v12" }, 
  obj2: { f21: "v21" } 
}

const second = { 
  obj1: { f11: "new_value" }, 
  obj3: { f: { ff: { fff: "v"} } } 
}

function extend(){
    for(var i=1; i<arguments.length; i++)
        for(var key in arguments[i])
            if(arguments[i].hasOwnProperty(key)) { 
                if (typeof arguments[0][key] === 'object'
                    && typeof arguments[i][key] === 'object')
                 extend(arguments[0][key], arguments[i][key]);
                else
                   arguments[0][key] = arguments[i][key];
             }
    return arguments[0];
}

console.log("Merged object is: " + JSON.stringify(extend(first, second)))

Nina Scholz · Answer 2 · 2017-07-31T06:48:53.800

You could use a recursive approach by checking the type and assigning new value.

function merge(source, target) {
    Object.keys(source).forEach(function (key) {
        if (!source[key] && typeof source[key] === 'object') {
            target[key] = target[key] || (Array.isArray(source[key]) ? [] : {});
            return merge(source[key], target[key]);
        }
        target[key] = source[key];
    });
}

const first = { obj1: { f11: "v11", f12: "v12" }, obj2: { f21: "v21" } },
      second = { obj1: { f11: "new_value" }, obj3: { f: { ff: { fff: "v"} } } };

merge(second, first);
console.log(first);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Javascript objects merge

2 Answers2