Merge multiple arrays of objects with different IDs

Question

I need to merge multiple json objects by common IDs. My issue is that my objects have different keys for the ID.

var object1 = [
  { "name":"apples" ,"w": 1, "x": 2 },
  { "name":"banana" ,"w": 1, "x": 2 },
  { "name":"cherry" ,"w": 1, "x": 2 },
];
var object2 = [
  { "type":"banana" ,"y": 3, "x": 4 },
  { "type":"cherry" ,"y": 3, "x": 4 },
];

I would like to obtain :

var object1 = [
  { "name":"apples" ,"w": 1, "x": 2 },
  { "name":"banana" ,"w": 1, "x": 4, "y": 3 },
  { "name":"cherry" ,"w": 1, "x": 4, "y": 3 },
];

I want to use the same Array [object1] instead of creating a new one. I created a codepen here

what if a second `object2` would contain uncommon fruit like `{ "type":"lime" ,"y": 2, "x": 4 }` ? What should be the result in such case? — RomanPerekhrest, Dec 30 '16 at 14:48
Possible duplicate of [Merge 2 arrays of objects](http://stackoverflow.com/questions/7146217/merge-2-arrays-of-objects) — Heretic Monkey, Dec 30 '16 at 15:34

score 2 · Answer 1 · answered Dec 30 '16 at 14:49

Loop through object2 and update the fruits if found using Array.prototype.find - see demo below:

var object1 = [{ "name":"apples" ,"w": 1, "x": 2 },{ "name":"banana" ,"w": 1, "x": 2 },{ "name":"cherry" ,"w": 1, "x": 2 }];
var object2 = [{ "type":"banana" ,"y": 3, "x": 4 },{"type":"cherry" ,"y": 3, "x": 4 }];

object2.forEach(function(e){
  var found = object1.find(function(k){
    return k.name === e.type;
  });
  if(found) {
    found.x = e.x;
    found.y = e.y;
  }
});

console.log(object1);

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

Nenad Vracar · Accepted Answer · 2016-12-30T15:00:50.293

2

You can use reduce() to create new array and find to check if object with same name exists in object2 object with same type.

var object1 = [
  { "name":"apples" ,"w": 1, "x": 2 },
  { "name":"banana" ,"w": 1, "x": 2 },
  { "name":"cherry" ,"w": 1, "x": 2 },
];
var object2 = [
  { "type":"banana" ,"y": 3, "x": 4 },
  { "type":"cherry" ,"y": 3, "x": 4 },
];


var result = object1.reduce(function(r, e) {
  var o = object2.find(a => e.name == a.type);
  r.push(o ? Object.assign({}, e, {x: o.x, y: o.y}) : e);
  return r;
}, [])

console.log(result)

edited Dec 30 '16 at 15:00

answered Dec 30 '16 at 14:49

Nenad Vracar

118,580
15
151
176

Hey, your solution worked awesome, the issue I have now it that ie doesn't take .find Do you know how to get over that ? – Bastien Bastiens Jan 12 '17 at 13:35

score 0 · Answer 3 · answered Dec 30 '16 at 15:23

I made a solution for your problem, can you try it ?

var object1 = [
  { "name":"apples" ,"w": 1, "x": 2 },
  { "name":"banana" ,"w": 1, "x": 2 },
  { "name":"cherry" ,"w": 1, "x": 2 },
];
var object2 = [
  { "type":"banana" ,"y": 3, "x": 4 },
  { "type":"cherry" ,"y": 3, "x": 4 },
];

function mergeObject(obj1,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}

function mergeObjectInArray(firstArray,  firstArrayKey, secondaryArray, secondaryArrayKey) {
  var resultArray = new Array();
  for(var firstArrayIndex in firstArray) {
    var firstArrayObject = firstArray[firstArrayIndex];
    var resultArrayObject = firstArrayObject;
    for(var secondaryArrayIndex in secondaryArray) {
    var secondaryArrayObject = secondaryArray[secondaryArrayIndex];
      if(firstArrayObject[firstArrayKey] === secondaryArrayObject[secondaryArrayKey]) {
        resultArrayObject = mergeObject(firstArrayObject,secondaryArrayObject);
        delete resultArrayObject[secondaryArrayKey];
      }
    }
    resultArray.push(resultArrayObject);
  }
  return resultArray;
  
}

var resultArray = mergeObjectInArray(object1, "name", object2, "type");


// Assuming JSON.stringify - not available in IE<8
console.log(JSON.stringify( resultArray ) );

Merge multiple arrays of objects with different IDs

3 Answers3