如何合并两个数组的对象

How to merge two array of objects

本文关键字：两个 数组 对象 合并 何合并      更新时间：2023-09-26

我有两个对象数组，如下:

result = [{id:24, name:"xyz"}, {id:45,name:"tze"}]
moreDetails = [{id:24, name2:"hyi"}, {id:45, name2:"tikw"}]

我想要一个像这样的合并结果

mergedResult= [{id:24, name:"xyz", name2:"hyi"}, {id:45,name:"tze", name2:"tikw"}]

请注意，合并发生在id上，这两个数组都有。

我试图遵循这一个如何合并这些数组/json对象?我如何动态地合并两个JavaScript对象的属性?

但是，我想我迷路了，我的问题可能需要一个简短的解决方案。

编辑

我试图简化我的例子。实际上，上述两个数组只有id的共同点，它们有不止名称name2。例如，有时result数组将有id, name, name2, name3, moreDetails将有id, name, name4。我想说的是，我并不总是提前知道除了id，这两个数组将有什么。因此，我不能像一些答案建议的那样硬编码字段名。

您可以使用for循环，在这种情况下，扩展数组的一个元素比创建另一个数组要好:

for (var i = 0; i < result.length; i++) {
    result[i].name2 = moreDetails[i].name2;
}
http://jsfiddle.net/9uchU/

如果目标元素有不同的索引:

for (var i = 0; i < result.length; i++) {
    var c = result[i],
        // filtering the second array based on the `id` 
        // of the current element 
        m = moreDetails.filter(function(elem) {
             return elem.id === c.id;
        })[0];
    c.name2 = m ? m.name2 : 'not defined';
}

编辑:根据你上次的编辑，正如@Blender提到的，你也可以使用jQuery $.extend()实用程序函数:

$.extend(result, moreDetails);

<html>
<head><title></title>
<script src="http://code.jquery.com/jquery-1.10.0.min.js" ></script>
</head>
<body>
<script>
    function findElement(arr, propName, propValue) {
      for (var i=0; i < arr.length; i++){
        if (arr[i][propName] == propValue){
          return arr[i];
        }
      }
    }
    var result = [{id:24, name:"xyz"}, {id:45,name:"tze"}];
    var moreDetails= [{id:24, name2:"hyi"}, {id:45, name2:"tikw"}];
    var mergedResult = result;
    for (var i = 0; i<result.length;i++ ) {
      //mergedResult[i].name2 = findElement(moreDetails, "id", result[i].id).name2
    $.extend(mergedResult[i],findElement(moreDetails, "id", result[i].id));
    } 
    mergedResult;
</script>
</body>
</html>
相关文章：