Javascript Merge Arrays Based On Common Element

I'm trying to create a single object which takes information from two separate objects (taken from ajax calls). Basically we have a list of tags, and also a list of elements, these

Solution 1:

Quick and dirty:

var a = [
        {"id": 1, "name": "yadda", "description": "yadda yadda"},
        {"id": 2, "name": "yadda1", "description": "yadda yadda1"},
        {"id": 7, "name": "yadda2", "description": "yadda yadda2"},
        {"id": 10, "name": "yadda3", "description": "yadda yadda3"}
    ], 
    b = [
        {"id": 1, "icon": "icon1.gif"},
        {"id": 2, "icon": "icon2.gif"},
        {"id": 7, "icon": "icon3.gif"},
        {"id": 10, "icon": "icon4.gif"}
    ];

var result = a.map(function(v){

    var ret;

    $.each(b, function(k, v2){

        if(v2.id === v.id){
            ret = $.extend({}, v2, v); // merge the objects in to a new onereturnfalse; // break the loop
        }      

    });

    return ret;

});

console.log(result);

http://jsfiddle.net/YwUA2/

As you can see, this assumes that there's a 1:1 relationship between the objects in the two arrays.

Solution 2:

http://plnkr.co/edit/77kMDeqkGvyVK87FISGl?p=info

function combine(x,y){
  var z = x;
  for (i=0; i<x.length; i++){
    for (j=0; j<y.length; j++){
      if (x[i].id === y[j].id) {
        z[i].icon = y[j].icon;
        break;
      }  
    }
  }
  return z;
}

Solution 3:

Seems like migration from SQL JOIN to Javascript code.

Here's a LEFT JOIN implement:

var hash2 = _.object(
    _.map(list2,function(row){ 
        return [row.id,_.omit(row,"id")]; 
    })
);
var newList = _.map(list1,function(row){ 
    return _.extend(row,hash2[row.id]||{}); 
});

Solution 4:

For whats its worth, no libraries, just vanilla js

Function that does the work:

functionmergeObjArrays(list1, list2) {
    var mergedList = [],
    i = 0,
    j = 0,
    k = 0,
    l1 = list1.length,
    l2 = list2.length,
    listMatchFound = false,
    mergedObj,
    mergeMatchFound = false;
    for (i = 0; i < l1; i++) {
        for (j = 0; j < l2; j++) {
            if (list1[i].id === list2[j].id) {
                listMatchFound = true;
                mergedObj = mergeObj(list1[i], list2[j]);
                for (k = 0; k < mergedList.length; k++) {
                    if (mergedList[k].id === mergedObj.id) {
                        mergedObj = mergeObj(mergedList[k], mergedObj);
                        mergedList[k] = mergedObj;
                        mergeMatchFound = true;
                        break;
                    }
                }
                if (!mergeMatchFound) {
                    mergedList.push(mergedObj);
                } else {
                    mergeMatchFound = false; //reset ready for another iteration
                }
            }
        }
        if (!listMatchFound) {
            mergedList.push(list1[i]);
        } else {
            listMatchFound = false; //reset ready for another iteration
        }
    }
    return mergedList;

    functionmergeObj(obj1, obj2) {
        for (var o in obj1) {
            obj2[o] = obj1[o];
        }
        return obj2;
    }
}

Example usage

var a = [
        {"id": 1, "name": "yadda", "description": "yadda yadda"},
        {"id": 2, "name": "yadda1", "description": "yadda yadda1"},
        {"id": 7, "name": "yadda2", "description": "yadda yadda2"},
        {"id": 10, "name": "yadda3", "description": "yadda yadda3"}
    ];

var b = [    
        {"id": 7, "icon": "icon3.gif"},
        {"id": 10, "icon": "icon4.gif"},
        {"id": 2, "icon": "icon2.gif"},
        {"id": 2, "title": "Number 2 title"},
        {"id": 1, "icon": "icon1.gif"}
    ];

//used likevar result = mergeObjArrays(a,b);

console.log(result)

//outputs (although not necessarily in order)
[
 {"id": 1, "name": "yadda", "description": "yadda yadda","icon": "icon1.gif"},
 {"id": 2, "name": "yadda1", "description": "yadda yadda1","icon": "icon2.gif","title": "Number 2 title"},
 {"id": 7, "name": "yadda2", "description": "yadda yadda2","icon": "icon3.gif"},
 {"id": 10, "name": "yadda3", "description": "yadda yadda3","icon": "icon4.gif"}
]   

This will ineffect do a merge based on objects in set1 (a in this example), (i.e. include object if occurs in set1, or merge object if in both set1 and set2 but not if it occurs only in set2), and deal with a 1 to many relationship as well (i.e. multiple instances of an object in set2 will be merged into one object with set1's obj) and order of the objects doesn't matter. You could even go a step further and pass in the field that is the key (common element) in both objects, in this example "id" is hardwired to the mergeObjArrays function.