var array1 = [ {name: "dima"} ]; var array2 = [ { name: "dima", age: 22, notes: "test0" }, { name: "oleg", age: 27, notes: "test1" }, { name: "vasja", age: 44, notes: "test2" } ];
How to make the first array expand itself using the values ​​of the second array? That is, I need to make it like this.

 var array1 = [ { name: "dima", age: 22, notes: "test0" } ];

And it is necessary that it works with other values, that is, if we have a different name in the first array, then we need to take properties from the second array that has the same name. How to do this?

  • Try using loops. - Igor
  • Elements missing in the first array (in this case, array2[1] and array2[2] ) - shouldn't they be copied? - yar85

2 answers 2

Since we are dealing with objects, the assignment operator = to “copy” them is unwise: because it will not be copying, but creating reference references to objects in array2 elements in array2 (that is, the first array will not actually contain assigned thus objects).

To copy the fields of an object, it is reasonable to use one of the following methods (the list does not end there, but these two are basic):

  • recursive function: pass through the fields of the source object "in depth" to the level of primitives, and assign them to the corresponding fields of the target object
  • static Object.assign method.

The examples below demonstrate the second approach as the most simple and compact.

Copying fields of only those objects that are present in the first array:

 var array1 = [ { name: "dima" } ]; var array2 = [ { name: "dima", age: 22, notes: "test0" }, { name: "oleg", age: 27, notes: "test1" }, { name: "vasja", age: 44, notes: "test2" } ]; function objArrMerge(target, source) { const findTargetObj = n => target.find(o => o.name === n); let tObj; for (let i = 0; i < source.length; i++) { if (source[i].name && source[i].name.length && (tObj = findTargetObj(source[i].name))) tObj = Object.assign(tObj, source[i]); } } objArrMerge(array1, array2); document.body.style.cssText = 'font: 14px monospace; white-space: pre;'; document.body.textContent = 'array1:\n' + JSON.stringify(array1, null, 2);

Copying the fields of all objects (if there is no object in the first array, it will be created)

 var array1 = [ { name: "dima" } ]; var array2 = [ { name: "dima", age: 22, notes: "test0" }, { name: "oleg", age: 27, notes: "test1" }, { name: "vasja", age: 44, notes: "test2" } ]; array1 = Object.assign(array1, array2); document.body.style.cssText = 'font: 14px monospace; white-space: pre;'; document.body.textContent = 'array1:\n' + JSON.stringify(array1, null, 2);

  • And for what minus the answer? o_O - yar85

You can do this:

 for(i=0; i < array1.length;i++) { if(array2[i].name == array1[i].name) { array1[i] = array2[i]; } }
  • array1[i] = array2[i]; - in theory, this creates a link to the object, instead of transferring it to array1 ... If so, then this is fraught with unpredictable behavior in the case when the manager decides to crash array2 (and he, the villain, is quite capable). - yar85
  • You can use one more variable to save the result. The question was how to combine 2 arrays into one - L. Vadim
  • It is not a matter of variables, but the fact that the assignment of objects occurs by reference (not by value!). "The question was how to combine 2 arrays into one" - that’s what we are talking about: the task is to merge , and not to create a link to another array in the array ... Look at it clearly: jsbin.com/rugafakumi/edit?js,output - yar85