A merge / concat like method for javascript objects.. not extend

Question

I would like to join nested objects with similar keys:

var obj1 = {
  id: 1,
  styles: {
    background: "white"
  }
};

var obj2 = {
  id: 2,
  styles: {
    border: "1px solid #ccc"
  }
};

var merged = merge(obj1, obj2);

// desired outcome
merged = {
  id: 2,
  styles: {
    background: "white",
    border: "1px solid #ccc"
  }
}

jQuery's extend method and similar ones that I've seen never concat Object properties, which is excactly what I'm looking for. Other than building this method myself, I'm hoping and quite sure there's already a solution for this..

What you just described is exactly what jQuery.extend does in deep copy mode. api.jquery.com/jQuery.extend — user400654
– user400654, Commented Oct 17, 2014 at 22:02
Click run code snippet in my answer and watch console. How is my result different from your desired outcome? — user400654
– user400654, Commented Oct 17, 2014 at 22:09

user400654 · Accepted Answer · 2014-10-17 22:08:54Z

1

jQuery.extend does what you want.

var obj1 = {
  id: 1,
  styles: {
    background: "white"
  }
};

var obj2 = {
  id: 2,
  styles: {
    border: "1px solid #ccc"
  }
};

var merged = jQuery.extend(true, obj1, obj2);

// desired outcome
console.log(merged);
console.log({
  id: 2,
  styles: {
    background: "white",
    border: "1px solid #ccc"
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

answered Oct 17, 2014 at 22:08

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

micahblu Over a year ago

Perfect, not sure how I missed that. I don't want to import all of jQuery just for this method though.. Other than browsing the source code, know of any gists for this?

micahblu Over a year ago

github.com/mout/mout/blob/v0.1.0/src/object/deepFillIn.js Think this should do the trick

micahblu · Accepted Answer · 2014-10-17 22:30:38Z

0

Here's a simple method that I wrote up which does the trick nicely and doesn't require you to import a huge library just for this functionality.

function extend(obj /* , ...source */) {
    for (var i = 1; i < arguments.length; i++) {
      for (var key in arguments[i]) {
        if (Object.prototype.hasOwnProperty.call(arguments[i], key)) {
          obj[key] = (typeof arguments[i][key] === 'object' ? extend(obj[key], arguments[i][key]) : arguments[i][key]);
        }
      }
    }
    return obj;
  }

answered Oct 17, 2014 at 22:30

micahblu

5,2336 gold badges31 silver badges33 bronze badges

Collectives™ on Stack Overflow

A merge / concat like method for javascript objects.. not extend

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related