JavaScript : unable to merge two arrays

Question

I'm not a veteran of JavaScript and I have a little problem :

In an AngularJS controller, I get 2 arrays from a WebService of the form [{"id":"1", "name":"aname1"}, {"id":"2", "name":"aname2"}]. They have both the same structure (this shouldn't be important).

With concat() or push() I'm unable to merge these arrays together, and I don't understand why.

I tried

var arrayS = Service.list();           // Get data from WebService
var arrayAE = ActeurExterne.list();    // Idem
var arrayRes = arrayS.concat(arrayAE);
$scope.acteurs = arrayRes;

In my AngularJS app, the array acteurs is empty (if I displays it outside a ng-repeat loop, it displays [] while arrayS and arrayAE display their contents)

And the same logic with :

array1.push.apply(array1, array2);

I tried to push elements of array2 one by one in a for loop, same result.

Nothing worked. Why?

Answer 1

You're actually merging the arrays correctly and both methods would work (provided like others said that you use the return value of concat), but the result is empty because you're doing it when the answers from the ajax requests didn't arrive yet and the arrays are still empty.

When making ajax requests you must manipulate the result inside the success callback function, not at the same level of the ajax request code; for example

var myvec = [];
$.getjson(request_url, function(data) {
    myvec = data;
});
process(myvec);

will NOT work, because it's attempting to use the content of myvec right after the request has been submitted but before the reply arrived. Correct code is instead:

$.getjson(request_url, function(data) {
    // This code is executed when the data arrives from the server
    process(data);
});

If you need to concatenate the results of two async queries you must either chain them (make the second query only once the first returned) or you must wait for the second one to complete:

// First solution, simple but slower (waits for first reply
// before making second request)
$.getjson(request_url_1, function(data_1) {
    $.getjson(request_url_2, function(data_2) {
        process(data_1.concat(data_2));
    });
});

or

// Second solution; starts both requests and waits for both
// of them to complete before doing the processing

var count = 0;
var res = [];
function handle_data(data) {
    res = res.concat(data);
    count += 1;
    if (count == 2) {
        process(res);
    }
}

$.get(request_url_1, handle_data);
$.get(request_url_2, handle_data);

This crazy guess is simply coming from the frequency that this kind of error has in beginner code.

Answer 2

concat() will return a new array, not concat to the this. So:

var a=[1,2,3];
var b=[4,5,6];
var c=a.concat(b);
// a is still [1,2,3]
// c is [1,2,3,4,5,6]

Answer 3

Did you assign the result to another variable? For example:

var result = array1.concat(array2);

The .concat() method returns a new Array with the concatenated elements.

MDN Documentation on Array.prototype.concat

Answer 4

Use this

var newArray= array1.concat(array2);