5

I have two array of objects like following:

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

I want a merged result of above like this

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

Please notice the merging is happening on id, which both of the arrays have.

I tried to follow this one How to merge these arrays/json objects? and this one How can I merge properties of two JavaScript objects dynamically?

But, I think I got lost and my question might require a short and simple solution.

EDIT

I tried to simplify my example. In actual, both of above arrays just have id in common, they have more than name, name2. For example, sometime result array will have id, name, name2, name3 and moreDetails will have id, name, name4 . I am trying to say, that I don't always know in ahead of time what both array will have except id. So, I cannot hard-code field names as some of the answers suggested.

C.OG
  • 6,236
  • 3
  • 20
  • 38
akk
  • 95
  • 1
  • 5
  • Does this answer your question? [Merge two array of objects based on a key](https://stackoverflow.com/questions/46849286/merge-two-array-of-objects-based-on-a-key) – Henke May 21 '21 at 08:40

2 Answers2

2

You can use a for loop, in this case extending one of the arrays' elements is better than creating another array:

for (var i = 0; i < result.length; i++) {
    result[i].name2 = moreDetails[i].name2;
}

http://jsfiddle.net/9uchU/

In case that target elements have different indices:

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';
}

Edit: Based on your last edit, as @Blender mentions, you can also use jQuery $.extend() utility function:

$.extend(result, moreDetails);
Ram
  • 143,282
  • 16
  • 168
  • 197
  • 1
    You could also do `$.extend(result[i], moreDetails[i])` – Blender May 27 '13 at 00:56
  • +1. I am going to try this. BTW, please see my edit in question. – akk May 27 '13 at 01:11
  • I was gonna answer with @Blender's comment, you should make it as an answer. Also, I'm pretty sure you dont need [i] part, just $.extend(arr1, arr2); – Tom Fobear May 27 '13 at 01:13
  • 1
    @Blender `$.extend(result[i], moreDetails[i])` worked. If you won't post your comment as an answer, I will have to accept this one, many thanks!. – akk May 27 '13 at 03:46
  • @TomFobear it `$.extend(result, moreDetails)` without [i] didn't work for me. – akk May 27 '13 at 03:48
1
<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>
Elliot Wood
  • 964
  • 1
  • 9
  • 29