How can I merge javascript two objects but only update properties that change

Question

I'm trying to write a function that will let me update my kitchen in this example below. Using something like underscore's extend, however, blows away the beer in my fridge as it's updating the entire fridge object.

Is there a simple method I can use so that I only make updates with the properties that change in my changeKitchen object and not update the entire fridge object?

// My original kitchen
var kitchen = {
  fridge: {
    beer: true,
    celery: false
  },
  cabinets: {
    candy: true
  }
};


// updates I would like to make to my kitchen
var changeKitchen = {
  fridge: {
    celery: true
  }
};


var updatedKitchen = _.extend(kitchen, changeKitchen);

console.log(updatedKitchen);

Returns

var kitchen = {
  fridge: {
    celery: false // beer is gone
  },
  cabinets: {
    candy: true
  }
};

However I would like to have:

var kitchen = {
  fridge: {
    beer: true,
    celery: true // changed
  },
  cabinets: {
    candy: true
  }
};

have you try `extend` from jQuery with `deep` option ;) https://api.jquery.com/jquery.extend/ — Long Nguyen, Nov 25 '15 at 16:51
I did not, thanks @LongNguyen. Would be nice if underscore had this option :/ https://github.com/jashkenas/underscore/issues/162. Though it looks like lodash `_.merge` might be simillar — Ben, Nov 25 '15 at 16:57

score 4 · Answer 1 · edited May 23 '17 at 12:15

Since you're already using Underscore, you could use Lodash instead, which is a superset of Underscore, and use its #merge function.

See this question about Differences between Lodash and underscore

// My original kitchen
var kitchen = {
  fridge: {
    beer: true,
    celery: false
  },
  cabinets: {
    candy: true
  }
};


// updates I would like to make to my kitchen
var changeKitchen = {
  fridge: {
    celery: true
  }
};


var updatedKitchen = _.merge(kitchen, changeKitchen);

document.write(JSON.stringify(updatedKitchen));

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

Andy · Answer 2 · 2015-11-25T17:09:45.110

2

Use _.extend on the nested objects instead:

function update(obj1, obj2) {
  for (var p in obj2) {
    if (obj1[p]) {
        _.extend(obj1[p], obj2[p]);
    } else {
      obj1[p] = obj2[p];
    }
  }
}

update(kitchen, changeKitchen);

DEMO

edited Nov 25 '15 at 17:09

answered Nov 25 '15 at 16:58

Andy

61,948
13
68
95

This won't work if `obj1` doesn't have the corresponding property. – Barmar Nov 25 '15 at 17:05

score 1 · Answer 3 · answered Nov 25 '15 at 17:51

Here is a solution in plain Javascript:

var kitchen = { fridge: { beer: true, celery: false }, cabinets: { candy: true } },
    changeKitchen = { fridge: { celery: true } };

function update(source, target) {
    Object.keys(target).forEach(function (k) {
        if (typeof target[k] === 'object') {
            source[k] = source[k] || {};
            update(source[k], target[k]);
        } else {
            source[k] = target[k];
        }
    });
}

update(kitchen, changeKitchen);
document.write('<pre>' + JSON.stringify(kitchen, 0, 4) + '</pre>');

score 0 · Answer 4 · answered Nov 25 '15 at 17:14

Try using for..in loop , Object.keys()

// My original kitchen
var kitchen = {
  fridge: {
    beer: true,
    celery: false
  },
  cabinets: {
    candy: true
  }
};

var changeKitchen = {
  fridge: {
    celery: true
  }
};

for (var prop in changeKitchen) {
  if (kitchen[prop]) {
    kitchen[prop]
      [Object.keys(changeKitchen[prop])] = changeKitchen[prop]
         [Object.keys(changeKitchen[prop])]
  }
}

console.log(kitchen)

How can I merge javascript two objects but only update properties that change

4 Answers4

Linked