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. — user400654
– user400654, Commented Jul 10, 2014 at 15:58
I know, but HOW can I get the points array to contain the data? — ObligatorRory
– ObligatorRory, Commented Jul 10, 2014 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. — user400654
– user400654, Commented Jul 10, 2014 at 16:01
Ok. Do you have an example of a way a promise could work with this usage? — ObligatorRory
– ObligatorRory, Commented Jul 10, 2014 at 16:06

gorpacrate · Accepted Answer · 2014-07-10 18:08:12Z

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, 2014 at 18:08

answered Jul 10, 2014 at 16:06

gorpacrate

5,6913 gold badges23 silver badges18 bronze badges

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

3 Comments

ObligatorRory Over a year ago

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?

gorpacrate Over a year ago

Yep, sorry, my mistake - forgot to replace promises[i]. with promise., I've updated the code already.

gorpacrate Over a year ago

Array.map() - actually is a loop which returns an array of modified values.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related