1

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.

ObligatorRory
  • 215
  • 2
  • 11
  • 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
  • http://stackoverflow.com/questions/21310964/angularjs-q-all – Kevin B Jul 10 '14 at 16:07

1 Answers1

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
});
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