Javascript add elements to an object from another object

Question

I have one object. The first element inside the data object looks like this:

data[0] = {name:"Bob", model:"Tesla", color:"white"};

and a second object, whose first element looks like this:

new_data[0] = {salary:"50000", age:"34"};

data and new_data are the same length, and each element inside of the new_data object needs to be appended onto the correlating data object, to make something like this:

data[0] = {name:"Bob", model:"Tesla", color:"white", salary:"50000", age:"34"};

I've used concat before to add elements into a single line object ( var

people = ["Dan","Bob"];
people.concat("Mike");

, but that same idea doesn't work here:

for ( var i = 0;i<data.length; i++ ) {
   data[i] = data[i].concat(new_data[i]);
}

How do I go about looping through this?

KKS · Accepted Answer · 2017-03-22 01:04:35Z

As such you have tagged your question with jQuery, I've used its $.extend() method below (jQuery Documentation).

This is just a one liner solution for your case. By passing true to this method, you can easily merge object2 into object1, recursively. jQuery is smart to figure out that both of your objects are array of same length, so the output is an array and each item in the resulting array is a merged result from both objects.

Object.assign is quite new (ES6) and may not be supported in all browsers (Source). But this jQuery way can be a useful time saver for supporting all the browsers.

var collection1 = [{
    name: "Bob",
    model: "Tesla",
    color: "white"
  },
  {
    name: "Bob 1",
    model: "Tesla 1",
    color: "white 1"
  }
];
var collection2 = [{
    salary: "50000",
    age: "34"
  },
  {
    salary: "50001",
    age: "35"
  }
];

var result = $.extend(true, collection1, collection2);

console.log(result);

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

Ousmane D. · Accepted Answer · 2017-03-22 01:07:47Z

MDN

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

How do I go about looping through this?

With Object.assign() in mind we can loop through it like below:

var data = [];
data[0] = {name:"Bob", model:"Tesla", color:"white"};
data[1] = {name:"Martin", model:"Ford", color:"Blue"};
data[2] = {name:"Danny", model:"BMW", color:"Purple"};

var new_data =[];
new_data[0] = {salary:"50000", age:"34"};
new_data[1] = {salary:"45000", age:"24"};
new_data[2] = {salary:"10000", age:"39"};

for(var i = 0; i < data.length; i++){    
    data[i] = Object.assign(data[i], new_data[i]);
    console.log(data[i]);
}

Ousmane D. · Accepted Answer · 2017-03-22 03:02:24Z

1

You can use jQuery.extend function like shown below. It extends existing data[i] object with properties from new_data[i] object.

for ( var i = 0; i<data.length; i++ ) {
   jQuery.extend(data[i], new_data[i]);
}

edited Mar 22, 2017 at 3:02

Ousmane D.

56.6k8 gold badges101 silver badges134 bronze badges

answered Mar 22, 2017 at 0:59

VinPro

9601 gold badge6 silver badges10 bronze badges

1 Comment

KKS Over a year ago

You don't need a extra loop, see my answer.

Christopher Smith · Accepted Answer · 2017-03-22 00:47:07Z

0

The most efficient way is to loop through every element in new_data and apply it to data.

for(var key in new_data[0]){
  data[0][key] = new_data[0][key];
}

answered Mar 22, 2017 at 0:47

Christopher Smith

6610 bronze badges

1 Comment

Anish Goyal Over a year ago

You may want to add a check, if(newData[0].hasOwnProperty(key)) before the assignment.

Telokis · Accepted Answer · 2017-03-22 00:48:13Z

0

What you need to use if Object.assign like so :

for ( var i = 0;i < data.length; i++ ) {
  Object.assign(data[i], new_data[i]);
}

This will alter the content of data.

concat is meant to be used with arrays. It will append one (or more) array(s) at the end of another.

let people = ["Dan","Bob"];
people.concat(["Mike"]); // people is now ["Dan", "Bob", "Mike"]

answered Mar 22, 2017 at 0:48

Telokis

3,38916 silver badges38 bronze badges

1 Comment

mccainz Over a year ago

Just be aware that IE has no support for this. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

mccainz · Accepted Answer · 2017-03-22 01:02:34Z

0

You could utilize the keys of one of the object to merge the two. This would work in IE9 and up as well. If you need to guard against overriding a property in your base object then you could add a quick truthy check for that key before assigning in the forEach invocation.

var obj1 = {id:1, name: "bob"}
var obj2 = {dob: "2000101"};

Object
.keys(obj1)
.forEach(function(k){
  obj2[k] = obj1[k];
});

console.log(obj2);

answered Mar 22, 2017 at 1:02

mccainz

3,4975 gold badges37 silver badges46 bronze badges

Collectives™ on Stack Overflow

Javascript add elements to an object from another object

6 Answers 6

Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Related