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.

Answer 1

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