Angular.js can efficiently handle waiting for multiple resource calls and AJAX requests

Question

Angular.js can efficiently handle waiting for multiple resource calls and AJAX requests

I'm facing a challenge in my Angular.js application where I need to make three separate resource calls and then use the data together once all the requests are complete. Here are the three calls I need to make:

# Retrieve the curriculum
$scope.curriculum = CurriculumResource.get id: $routeParams.id

# Fetch the list of courses
$scope.courses = CourseResource.query()

# Get the array of groups
$scope.groups = GroupResource.query()

I've been trying to figure out how to execute additional logic after confirming that all the requests have finished. I attempted using both $watchGroup (as shown below) and $watchCollection, but neither seems to be functioning properly.

$scope.$watchGroup ['curriculum', 'courses', 'groups'], ->
    # Despite expecting this to run whenever something changes in the above array,
    # it only runs once
    console.log 'Only runs once'

    # Although eventually the values of the items in the following if statement become true,
    # the condition never triggers when they are indeed true
    if $scope.curriculum.groups and $scope.groups.length          
      console.log 'never gets here!'

javascript angularjs coffeescript

Answer 1

Answer №1

In my opinion, achieving this task could be done using the $q.all method if all your requests return promises. Here's an example:

$q.all([UserResource.get({id: $routeParams.id}), TaskResource.query(), CategoryResource.query()])
  .then(function(results){
     // The 'results' array will contain values resolved from promises in their original sequence
   })
   .catch(function(err) {
     // This block will handle any rejected promise
   });

Answer 2

In my opinion, achieving this task could be done using the $q.all method if all your requests return promises. Here's an example:

$q.all([UserResource.get({id: $routeParams.id}), TaskResource.query(), CategoryResource.query()])
  .then(function(results){
     // The 'results' array will contain values resolved from promises in their original sequence
   })
   .catch(function(err) {
     // This block will handle any rejected promise
   });

Answer 3

Answer №2

Utilize the $q service by injecting it into your code like this:

$q.all(
  [
  CourseResource.fetch(),
  CurriculumResource.fetch(),
  GroupResource.fetch()
  ]
).then(function(data) {
  $scope.courses = data[0];
  $scope.curriculum = data[1];
  $scope.groups = data[2];
  // Perform actions once all data is available
});

Ensure that your services return $q deferreds. All requests made with $http are already deferred, but you may want to wrap them for additional processing (such as extracting important information or applying model logic):

...
fetch: function() {
  return $http.get("...url...").then(function(result) {
    // Process the response before returning it
  }); // The use of .then is optional
}
...

Answer 4

Utilize the $q service by injecting it into your code like this:

$q.all(
  [
  CourseResource.fetch(),
  CurriculumResource.fetch(),
  GroupResource.fetch()
  ]
).then(function(data) {
  $scope.courses = data[0];
  $scope.curriculum = data[1];
  $scope.groups = data[2];
  // Perform actions once all data is available
});

Ensure that your services return $q deferreds. All requests made with $http are already deferred, but you may want to wrap them for additional processing (such as extracting important information or applying model logic):

...
fetch: function() {
  return $http.get("...url...").then(function(result) {
    // Process the response before returning it
  }); // The use of .then is optional
}
...

Angular.js can efficiently handle waiting for multiple resource calls and AJAX requests

Answer №1

Answer №2

Similar questions

Navigating between pages using the ExpressJS and Angular 1 routing system

Arranging an array based on relationships between children and parents

How do I create individual tables for each JSON array within my object using React and MaterialUI?

Should I install @capacitor/android as a dev dependency in the package.json file of a React project?

Tips for maximizing website performance on touch-enabled devices

Should I serialize a 2D array in JSON format and send it as two separate arrays, or is

HtmlUnitDriver fails to execute javascript while loading a page from a URL

Retrieve the content of a text field with jQuery

Associate information with HTML elements

What is the best way to obtain the current date in JavaScript in the format Mon-DD-YYYY?

I am encountering the error message "Utils is not defined" while attempting to generate a chart using chart.js

Creating a consolidated HTML table by extracting and comparing data from various JSON files

Exclude the UL hierarchy from removing a class in jQuery

I can't seem to get db.collection.findOneAndUpdate() to work properly when using the

A method to verify the presence of a specific element within a list using JavaScript

Get the Highchart image downloaded within your Phonegap mobile application

AngularJS modal directives trigger a reset of $scope variables

The versatility of reusable Backbone components

Obtaining a return value from a function that involves a series of chained Ajax requests in jQuery

Ember application experiencing trouble displaying Facebook Like Box