Merge array of arrays using javascript

Question

I'm a javascript beginner and I'm trying to merge two arrays.

I have two arrays like this:

 arr1[
{
        description : "this is a object",
        array       : ["a","b"]
 }
    ]

 arr2[
{
       array : ["c","d"]
} 
   ]

And I want to get a resulting javascript object like this

result = { description : "this is a object", array : ["a","b","c","d"]}

The order of elements isn't important to me. So I tried the following.

result = $.extend(true, {},arr1,arr2)[0];

But this returns the following output

result = { description : "this is a object", array : ["c","d"] }

Which isn't what I want the result to be since it's missing values. How can I merge them the way I want?

Answer 1

You're confusing arrays and hashes. The presence of the colon separator in your "arrays" suggests you're trying to define hashes. Hashes must be delimited by braces {} rather than square brackets [].

Assuming you're trying to define and combine two hashes, here's how it could be done without any genericity, IOW by explicitly specifying how to incorporate each key/value pair from each input hash into the combined hash:

var obj1 = {
    description : "this is an object",
    array       : ["a","b"]
};

var obj2 = {
    array : ["c","d"]
};

var res = {
    description : obj1.description,
    array       : obj1.array.concat(obj2.array)
};

alert(res.description); // "this is an object"
alert(res.array); // a,b,c,d

---

Now, for a more general solution, you can code "standard" logic for how to handle various data types and their collisions in the input pair of hashes:

var obj1 = {
    description : "this is an object",
    array       : ["a","b"]
};

var obj2 = {
    array : ["c","d"]
};

function combine(obj1,obj2) {
    var res = {};
    for (var k1 in obj1) {
        if (!obj1.hasOwnProperty(k1)) continue;
        if (obj2.hasOwnProperty(k1)) { // collision
            if (typeof(obj1[k1]) !== typeof(obj2[k1])) throw "type mismatch under key \""+k1+"\".";
            if (Array.isArray(obj1[k1])) {
                res[k1] = obj1[k1].concat(obj2[k1]);
            } else if (typeof(obj1[k1]) === 'string' || obj1[k1] instanceof String) {
                res[k1] = obj1[k1]+obj2[k1];
            } else if (typeof(obj1[k1]) === 'object') {
                res[k1] = combine(obj1[k1],obj2[k1]);
            } else {
                throw "unsupported collision type "+typeof(obj1[k1])+" under key \""+k1+"\".";
            }
        } else {
            res[k1] = obj1[k1];
        }
    }
    for (var k2 in obj2) {
        if (!obj2.hasOwnProperty(k2)) continue;
        if (obj1.hasOwnProperty(k1)) continue; // already handled it above
        res[k2] = obj2[k2];
    }
    return res;
}

var res = combine(obj1,obj2);

alert(res.description); // "this is an object"
alert(res.array); // a,b,c,d

---

Following your edit, my solutions are still applicable; you just have to index the arrays first to extract the contained objects. So here would be the revised implementation:

Solution 1:

var res = {
    description : arr1[0].description,
    array       : arr1[0].array.concat(arr2[0].array)
};

Solution 2:

var res = combine(arr1[0],arr2[0]);