How to merge two array of objects

Question

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.

Does this answer your question? Merge two array of objects based on a key — Henke
– Henke, Commented May 21, 2021 at 8:40

Ram · Accepted Answer · 2013-05-27 01:13:31Z

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);

edited May 27, 2013 at 1:13

answered May 27, 2013 at 0:47

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Blender Over a year ago

You could also do $.extend(result[i], moreDetails[i])

akk Over a year ago

+1. I am going to try this. BTW, please see my edit in question.

Tom Fobear Over a year ago

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);

akk Over a year ago

@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 Over a year ago

@TomFobear it $.extend(result, moreDetails) without [i] didn't work for me.

Elliot Wood · Accepted Answer · 2013-05-27 01:40:22Z

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>

edited May 27, 2013 at 1:40

answered May 27, 2013 at 0:59

Elliot Wood

9641 gold badge9 silver badges29 bronze badges

3 Comments

akk Over a year ago

Thanks!, please see my edit in question. I provided more details.

Elliot Wood Over a year ago

Updated the example for you :)

akk Over a year ago

thanks for detailed code example, I will give this post up vote as soon as I earn 15pts :)

Collectives™ on Stack Overflow

How to merge two array of objects

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related