angular -- accessing data of multiple http calls - how to resolve the promises

HttpAngularjs

Http Problem Overview


I am getting stuck on something I think should be straight forward. I need to take data from three different ajax calls, combine and process all three, and display the resulting array to the user.

In its simplest form my code looks like this:

function giftControler ($scope, $http) {
  var names = $http.get("names.json"),
      naughty = $http.get("naughty.json"),
      nice = $http.get("nice.json");

I understand that my variables are assigned to promises, not actual results, and that the http request have been passed to the event queue. If I follow these with executable statements these variables will be undefined. I don't understand how to wait for these promises to resolve in order to continue processing them.

What I would like to do is immediately add the code:

      for (var i=0; i<names.length; i++){
        for (var j=0; j<nice.length; j++){
          if (names[i] === nice[j]){
            names[i] = names[i] + "--Yay!!";
          };
        };
      };                
      $scope.kids = names;

The problem is that I can't just work off of the promises as if they were resolved arrays. Javascript will see these for statements right after the http calls and try to execute them immediately, even though the promises have not been resolved.

Where I get stuck is that the $http api is giving me a promise object with three functions: error, success & then. I am not sure what to do with that in this case. I need a single success function for all three. I need all three to resolve, then process the data in each, and then assign the result to an angular model.

I am sure I am missing something obvious, but does anyone have a suggestion? In my real work I have several ajax calls multiple data sources and a lot of processing (comparing values, sorting, concatenating, etc) to come up with one good data collection, but I can't get passed this issue.

Thanks,

Http Solutions


Solution 1 - Http

You can use $q's function 'all':

function giftControler ($scope, $http, $q) {
  var names = $http.get("names.json"),
      naughty = $http.get("naughty.json"),
      nice = $http.get("nice.json");
  $q.all([names, naughty,nice]).then(function(arrayOfResults) { 
      ... This callback would be called when all promised would be resolved
    });

This way is little bit cleaner.

Here is link to docementation: http://docs.angularjs.org/api/ng.$q

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMyTimeFinderView Question on Stackoverflow
Solution 1 - HttpValentyn ShybanovView Answer on Stackoverflow