Asynchronous javascript issue [duplicate]

Question

This question already has an answer here:

• How do I return the response from an asynchronous call? 33 answers

I'm trying to make a function details() that looks up the details of certain events (getdetails) based on the available events. In the example below, details are asked for the events with IDs ZRGZZ, RGHER and GRFDZ. These details should be placed inside one array (credits to Theodore's answer). The result should be that when I call details(), the resulting array is stored so I can use it later on.

The problem is that I don't know how I can return this final array. console.log(JSON.stringify(res)); is executed before the construction of the array is completed. I know this probably has something to do with asynchronous js, but I just can't wrap my head around it...

function details()
{
    var res = {
    "Result": "success",
    "Key": "12345",
    "Data": [{
        "ID": "ZRGZZ",
        "lastChangedDate": "2015-12-03 11:14:27"
    }, {
        "ID": "RGHER",
        "lastChangedDate": "2015-12-03 15:17:47"
    }, {
        "ID": "GRFDZ",
        "lastChangedDate": "2015-12-03 05:25:11"
    }]
};

    var i = 0;
    var tmp;
    res.Data.map(function(val,i){

        getdetails(val.ID).then(function(data){
            tmp = JSON.parse(data);
            console.log(tmp);
            Object.keys(tmp.Data[0]).map(function(v,j){
                val[v] = tmp.Data[0][v];
                console.log(JSON.stringify(res)); //(*)the last res gives me the result I'm looking for
            });

        }, function(error){ //error callback
            console.log(error)
        });


    });
console.log(JSON.stringify(res)); //this is executed before (*)
}

Answer 1

Well you already use promise - see then in your code and if it's angular then then itself return deferred promise so you can do:

res.Data.map(function (val, i) {
    getdetails(val.ID).then(function (data) {
        tmp = JSON.parse(data);
        Object.keys(tmp.Data[0]).map(function (v, j) {
            val[v] = tmp.Data[0][v];
        });
    }, function (error) { //error callback
        console.log(error)
    }).then(function () {
        console.log(JSON.stringify(res));
    })
});

EDIT: inject service $q into your controller or service

promises = [];
res.Data.map(function (val) {
    promises.push(getdetails(val.ID).then(function (data) {
        tmp = JSON.parse(data);
        Object.keys(tmp.Data[0]).map(function (v, j) {
            val[v] = tmp.Data[0][v];
        });
    }, function (error) { //error callback
        console.log(error)
    }));
});
$q.all(promises).then(function () {
    console.log(JSON.stringify(res));
});

now when all the getdetails are resolved you can console.log or do whatever you want with the data

Answer 2

One way is to use the async library, in particular the async.each or async.eachSeries function. (You could use async.map, but in your case you are actually not mapping, but modifying the underlying array items directly.)

In particular, your code would look like this:

async.each(res.Data, function(val,callback){
    getdetails(val.ID).then(function(data){
        tmp = JSON.parse(data);
        Object.keys(tmp.Data[0]).map(function(v,j){
            val[v] = tmp.Data[0][v];
        });
        callback(null); // Asynchronous code has finished without error
    }, function(error){ //error callback
        callback(error); // Asynchronous code has finished with error
    });
}, function(error) {
    // All asynchronous calls have finished
    if(error)
        console.log("Error", error);
    else
        console.log("Success", res);
});

async.each will run many iterations at the same time, while async.eachSeries will run only one iteration at the same time.