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?

array1.push.apply(array1, array2); is working for me. concat is also working, though it return a new array: array1 = array1.concat(array2);. — Kobi
– Kobi, Commented Nov 4, 2013 at 10:03
Do you really think concat or push doesn't work? Please state what is the problem with a code fragment... for sure your problem is somewhere else. — 6502
– 6502, Commented Nov 4, 2013 at 10:04
@Pierre: when you say "Nothing worked" - what actually happened? What result did you get from the code you tried, and what result were you expecting? — Paul D. Waite
– Paul D. Waite, Commented Nov 4, 2013 at 10:08

Nikos Paraskevopoulos · Accepted Answer · 2013-11-04 10:02:48Z

6

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]

answered Nov 4, 2013 at 10:02

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

1 Comment

Kobi Over a year ago

I doubt that's the real issue: the OP says "I tried to push elements of array2 one by one in a for loop, same result". I think the question is missing the real problem...

6502 · Accepted Answer · 2013-11-04 11:37:32Z

2

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.

edited Nov 4, 2013 at 11:37

answered Nov 4, 2013 at 11:02

6502

115k17 gold badges177 silver badges277 bronze badges

2 Comments

Pierre-Yves Le Dévéhat Over a year ago

This seems to be the reason. With arrays assigned statically, concat and push work fine. What solution do you suggest for my problem ?

6502 Over a year ago

@Pierre-YvesLeDévéhat: see edit for a simple explanation of asynchronous logic needed for ajax.

rexcfnghk · Accepted Answer · 2013-11-04 10:03:24Z

2

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

answered Nov 4, 2013 at 10:03

rexcfnghk

15.7k1 gold badge34 silver badges59 bronze badges

Comments

Razvan Dumitru · Accepted Answer · 2013-11-04 10:04:16Z

1

Use this

var newArray= array1.concat(array2);

answered Nov 4, 2013 at 10:04

Razvan Dumitru

12.5k5 gold badges38 silver badges55 bronze badges

Collectives™ on Stack Overflow

JavaScript : unable to merge two arrays

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related