Executing multiple calls with Angular's $http service and then resolving them within a loop using underscore

Question

Executing multiple calls with Angular's $http service and then resolving them within a loop using underscore

I am facing an issue while trying to fetch multiple data from $http inside _.each function and display the combined data in $scope.tasksData.

The problem I encountered is that _.each is being executed later, causing it to return null first. Can someone please provide guidance on how to resolve this issue?

Thank you

var tasksList, processingStageId;

var apiURL = "http://localhost:9080/caseDetails/" + $stateParams.caseId + "?_=1461046349867";



var stagesList = $http.get(apiURL).then(function(resdata, status, headers, config) {

return resdata;

}).then(function(stagesData) {

stageId = stagesData.data.childStages;
var allTasksData = [];
var self = this;

_.each(stageId, function(item) {
    var stagesApiURL = "http://localhost:9080/stageDetails/" + item.stage.stageId;

    $http.get(stagesApiURL).then(function(taskData, status, headers, config) {
        //_.extend(allTasksData, taskData.data);            
        allTasksData.push(taskData.data);

    });
});

return allTasksData;

}).then(function(allTasksData) {
console.log("Hello");

_.each(allTasksData, function(data) {
    $scope.tasksData.concat(data);
});
});

javascript angularjs angular-promise

Answer 1

Answer №1

To retrieve data after resolving all requests, you can use the $q.all([prom, prom, prom]) method.

.then(function(stagesData){
    var stageId = stagesData.data.childStages;
    var tasks = [];

    _.each(stageId, function(item){
        var stagesApiURL = "http://localhost:9080/stageDetails/" + item.stage.stageId;
        var req = $http.get(stagesApiURL).then(function(taskData, status, headers, config){            
            return taskData.data;
        });
        tasks.push(req);
    });

    //Combine all promise requests and resolve when all requests are resolved
    return $q.all(tasks);

})
/**
 * allTasksData - [taskData.data, taskData.data , ...]
 */
.then(function(allTasksData){
  ...
});

Answer 2

To retrieve data after resolving all requests, you can use the $q.all([prom, prom, prom]) method.

.then(function(stagesData){
    var stageId = stagesData.data.childStages;
    var tasks = [];

    _.each(stageId, function(item){
        var stagesApiURL = "http://localhost:9080/stageDetails/" + item.stage.stageId;
        var req = $http.get(stagesApiURL).then(function(taskData, status, headers, config){            
            return taskData.data;
        });
        tasks.push(req);
    });

    //Combine all promise requests and resolve when all requests are resolved
    return $q.all(tasks);

})
/**
 * allTasksData - [taskData.data, taskData.data , ...]
 */
.then(function(allTasksData){
  ...
});

Answer 3

Answer №2

To solve this issue, ensure you include the $q service and utilize the $q.all function.

var stagesList = $http.get(apiURL).then(function(resdata, status, headers, config) {
  return resdata;
})
.then(function(stagesData) {
  stageId = stagesData.data.childStages;

  var self = this;

  return $q.all(
    _.map(stageId, function(item) {
      var stagesApiURL = "http://localhost:9080/stageDetails/" + item.stage.stageId;

      return $http.get(stagesApiURL).then(function(taskData, status, headers, config) {
          return taskData.data;
      });
    })
  );
})
.then(function(allTasksData) {
  console.log("Hello");

  _.each(allTasksData, function(data) {
      $scope.tasksData.concat(data);
  });
});

A brief explanation: we opt for using map instead of each to create an array of promises. Subsequently, we pass this array of promises to the $q.all function which generates a new promise containing an array of taskData.data as its parameter.

Answer 4

To solve this issue, ensure you include the $q service and utilize the $q.all function.

var stagesList = $http.get(apiURL).then(function(resdata, status, headers, config) {
  return resdata;
})
.then(function(stagesData) {
  stageId = stagesData.data.childStages;

  var self = this;

  return $q.all(
    _.map(stageId, function(item) {
      var stagesApiURL = "http://localhost:9080/stageDetails/" + item.stage.stageId;

      return $http.get(stagesApiURL).then(function(taskData, status, headers, config) {
          return taskData.data;
      });
    })
  );
})
.then(function(allTasksData) {
  console.log("Hello");

  _.each(allTasksData, function(data) {
      $scope.tasksData.concat(data);
  });
});

A brief explanation: we opt for using map instead of each to create an array of promises. Subsequently, we pass this array of promises to the $q.all function which generates a new promise containing an array of taskData.data as its parameter.

Answer 5

Answer №3

$q.all() is a helpful tool at your disposal.

As stated in the documentation:

It combines multiple promises into one promise that will only be resolved once all input promises are resolved.

By registering all your calls and waiting for them to resolve, you can then proceed with processing your data as needed.

Check out this example fiddle (not created by me) to see how it operates.

Answer 6

$q.all() is a helpful tool at your disposal.

As stated in the documentation:

It combines multiple promises into one promise that will only be resolved once all input promises are resolved.

By registering all your calls and waiting for them to resolve, you can then proceed with processing your data as needed.

Check out this example fiddle (not created by me) to see how it operates.

Executing multiple calls with Angular's $http service and then resolving them within a loop using underscore

Answer №1

Answer №2

Answer №3

Similar questions

Managing the jQuery.noConflict function

Is it possible to use both material-ui@next and the previous version concurrently?

Exploring categories with AngularJS filtering

Is it possible for JavaScript to detect elements or scripts within a hidden element using display="none"?

Looping through arrays within objects using NgFor in Angular 2/JavaScript

What is the process for adding a highlighted area beneath a curve on a high chart?

Tips for validating a receipt in an In-App purchase within an Ionic1 or Ionic2 application on iOS

What methods do developers employ to establish connections between pages in AngularJs?

HOC that can be used with many different components

Implementing the decrement functionality within an onclick event handler for a variable

Encountering a malfunction in executing the AngularJS controller file

Position a div relative to another div with a static position

The FormData() object in Django backend is consistently found to be void of any data

Error: Module not located - Unable to resolve 'crypto'

When it comes to utilizing jQuery for the mobile view, how many jQuery libraries are recommended for optimal performance?

Retrieve JSON data from PHP using D3.request

How can I open the Ion-datetime view for the current year without allowing the selection of a specific day?

`problem with moment.js incorrectly identifying the day of a given date`

preserving the factory variable when reloading the page

I'm encountering an issue with this error message: "Warning: Each item in a list must be assigned a unique 'key' prop."