如何合併兩個JSON對象數組 - 刪除重複項並保留Javascript/jQuery中的順序？

Question

的jsfiddle鏈接：http://jsfiddle.net/vN6fn/1/

假設我有這2個對象：

var obj1 = { data: [ 
         {id:1, comment:"comment1"}, 
         {id:2, comment:"comment2"}, 
         {id:3, comment:"comment3"} 
        ] } 

var obj2 = { data: [ 
         {id:2, comment:"comment2"}, 
         {id:3, comment:"comment3"}, 
         {id:4, comment:"comment4"} 
        ] } 

和最終目標應該是這樣的：

var final = { data: [ 
         {id:1, comment:"comment1"}, 
         {id:2, comment:"comment2"}, 
         {id:3, comment:"comment3"}, 
         {id:4, comment:"comment4"} 
        ] } 

這裏有一些事情要考慮：

• OBJ1和OBJ2，可能會或可能不會有重複

$.extend()替代對象，$.merge()不刪除重複（我知道我可以做循環，但我在尋找一個更好的方式來做到這一點）。

Answer 1

您可以使用$.merge，然後通過並刪除重複項，然後對其進行排序。

$.merge(obj1.data, obj2.data); 

var existingIDs = []; 
obj1.data = $.grep(obj1.data, function(v) { 
    if ($.inArray(v.id, existingIDs) !== -1) { 
     return false; 
    } 
    else { 
     existingIDs.push(v.id); 
     return true; 
    } 
}); 

obj1.data.sort(function(a, b) { 
    var akey = a.id, bkey = b.id; 
    if(akey > bkey) return 1; 
    if(akey < bkey) return -1; 
    return 0; 
}); 

Answer 2

http://jsfiddle.net/J9EpT/

function merge(one, two){ 
    if (!one.data) return {data:two.data}; 
    if (!two.data) return {data:one.data}; 
    var final = {data:one.data}; 
    // merge 
    for(var i = 0 ; i < two.data.length;i++){ 
     var item = two.data[i]; 
     insert(item, final); 
    } 
    return final; 
} 


function insert(item, obj){ 
    var data = obj.data; 
    var insertIndex = data.length; 
    for(var i = 0; i < data.length; i++){ 
     if(item.id == data[i].id){ 
      // ignore duplicates 
      insertIndex = -1; 
      break; 
     } else if(item.id < data[i].id){ 
      insertIndex = i; 
      break; 
     } 
    } 
    if(insertIndex == data.length){ 
     data.push(item); 
    } else if(insertIndex != -1) { 
     data.splice(insertIndex,0,item); 
    } 
} 

var final = merge(obj1, obj2); 

Answer 3

這裏是一個直的jQuery溶液：

function mergeDeep(o1, o2) { 
    var tempNewObj = o1; 

    //if o1 is an object - {} 
    if (o1.length === undefined && typeof o1 !== "number") { 
     $.each(o2, function(key, value) { 
      if (o1[key] === undefined) { 
       tempNewObj[key] = value; 
      } else { 
       tempNewObj[key] = mergeDeep(o1[key], o2[key]); 
      } 
     }); 
    } 

    //else if o1 is an array - [] 
    else if (o1.length > 0 && typeof o1 !== "string") { 
     $.each(o2, function(index) { 
      if (JSON.stringify(o1).indexOf(JSON.stringify(o2[index])) === -1) { 
       tempNewObj.push(o2[index]); 
      } 
     }); 
    } 

    //handling other types like string or number 
    else { 
     //taking value from the second object o2 
     //could be modified to keep o1 value with tempNewObj = o1; 
     tempNewObj = o2; 
    } 
    return tempNewObj; 
}; 

Demo與複雜的對象。我把它變成了博客文章，展示了jQuery的.extend（）和我的腳本here之間的區別。