Trouble getting Angular-JS to wait for async call before proceeding

Question

So I know that you need to use promises in Angular to manage async, but I'm not quite sure how to do it in this instance.

function getLineGraphData(promises){
    var points = [];
    for (var i = 0; i < promises.length; i++) {
        $http.get('/file/tsDataPoints/'+promises[i].unit+"?startDate="+promises[i].startTs+"&endDate="+promises[i].endTs+"&startState="+promises[i].startState+"&endState="+promises[i].endState).success(function(data){
            points.push(data);
            console.log(data);
        });
    }
    console.log(points);
    return points;
}

I think what is throwing me off here is that the data I'm using to build my queries is in an array. So I don't just need to get the return from one request. There will be several. What do I need to do? Examples would be helpful. Thanks.

you can't return the `points` array from this function and expect it to contain the data from the async request. — Kevin B, Jul 10 '14 at 15:58
I know, but HOW can I get the points array to contain the data? — ObligatorRory, Jul 10 '14 at 16:01
you can't. it isn't possible. it will always return before the ajax requests have completed. You instead need to return a promise, or use a callback. `$q.all` will help with being able to return a promise that becomes resolved when all of the requests are complete. — Kevin B, Jul 10 '14 at 16:01
Ok. Do you have an example of a way a promise could work with this usage? — ObligatorRory, Jul 10 '14 at 16:06

gorpacrate · Accepted Answer · 2014-07-10T18:08:12.963

3

$http returns a promise. $q.all takes array of promises and resolves when all of them are resolved. So it's possible to:

promises = promises.map(function(promise){
    return $http.get('/file/tsDataPoints/'+promise.unit+"?startDate="+promise.startTs+"&endDate="+promise.endTs+"&startState="+promise.startState+"&endState="+promise.endState);
});

$q.all(promises).then(function(resultsArray){
    console.log(resultsArray); // array of results of all your $http's
});

Upd:
And if you need to return it from your function, you can

function getLineGraphData(promises){
    promises = promises.map(function(promise){
        return $http.get('/file/tsDataPoints/'+promise.unit+"?startDate="+promise.startTs+"&endDate="+promise.endTs+"&startState="+promise.startState+"&endState="+promise.endState);
    });        
    return $q.all(promises);
}

And call it like that

getLineGraphData(promisesArr).then(function(resultsArray){ 
    // do your stuff
});

edited Jul 10 '14 at 18:08

answered Jul 10 '14 at 16:06

gorpacrate

5,109
3
21
18

I'm getting an error with can't accept token "i" because I have promises[i], to get the value in each of the array objects. How would I iterate through them in them function you created without a loop? – ObligatorRory Jul 10 '14 at 17:49
Yep, sorry, my mistake - forgot to replace `promises[i].` with `promise.`, I've updated the code already. – gorpacrate Jul 10 '14 at 18:03
Array.map() - actually is a loop which returns an array of modified values. – gorpacrate Jul 10 '14 at 18:09

Trouble getting Angular-JS to wait for async call before proceeding

1 Answers1