The issue of continuous requests in AngularJS controllers

Question

The issue of continuous requests in AngularJS controllers

In my controller, I have a simple function that calculates the number of answers for each question:

$scope.countAnswers = function(questionid) {
  AnswersQueries.getAnswers(questionid, function(answers) {
    var answersCount = answers.length;
    return answersCount;
  });
};

HTML

<!-- Inside ng-repeat -->
<div>{{countAnswers(question._id)}}</div>

Service

angular.module('app')
.factory('AnswersQueries', function ($resource) {
  return {

      getAnswers: function(questionId, callback) {

        // Define resource
        var data = $resource('api/answers?questionid=' + questionId);

        // Make the get call
        data.query().$promise.then(function(answer){

           // Return answer in callback
           callback(answer);
        });
      }
  };
});

However, when I try to reload the page, it seems to be sending multiple requests to count the questions indefinitely:

For example...

GET /api/answers?questionid=54ae02aec07933920b000001 200 28ms - 371b
GET /api/answers?questionid=54aec71cdd9a29d210000001 200 28ms - 2b
GET /api/answers?questionid=54aec75bdd9a29d210000002 200 32ms - 2b
GET /api/answers?questionid=54adf9f0e0913a590a000001 200 7ms - 2b
GET /api/answers?questionid=54ae02aec07933920b000001 200 14ms - 371b
GET /api/answers?questionid=54aec71cdd9a29d210000001 200 4ms - 2b
GET /api/answers?questionid=54aec75bdd9a29d210000002 200 4ms - 2b
GET /api/answers?questionid=54aec75bdd9a29d210000002 200 15ms - 2b
GET /api/answers?questionid=54ae02aec07933920b000001 200 18ms - 371b
GET /api/answers?questionid=54aec71cdd9a29d210000001 200 17ms - 2b
GET /api/answers?questionid=54adf9f0e0913a590a000001 200 20ms - 2b
GET /api/answers?questionid=54ae02aec07933920b000001 200 17ms - 371b
GET /api/answers?questionid=54adf9f0e0913a590a000001 200 7ms - 2b
GET /api/answers?questionid=54aec71cdd9a29d210000001 200 9ms - 2b

I noticed an error in the console (I think I can troubleshoot now... I didn't see this before because the page was frozen):

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

What could potentially be causing this issue?

javascript angularjs

Answer 1

Answer №1

Your implementation of the countAnswers function seems to be causing issues in resolving the problem.

The statement return answersCount; within the callback function is incorrect as it returns from the inner function and not from the actual countAnswers function. This leads to a situation where the function does not return any value. Since the execution of AnswersQueries.getAnswers is asynchronous, you cannot directly use its result for further operations.

To address this issue, it is recommended to store the values within the scope and update them inside the callback function.

$scope.counts = {};
$scope.countAnswers = function(questionId) {
  AnswersQueries.getAnswers(questionId, function(answers) {
    $scope.counts[questionId] = answers.length;
  });
};

// Invoke $scope.countAnswers for each question in your scope *once*

The corresponding HTML code should be structured as follows:

<div>{{counts[question._id]}}</div>

Answer 2

Your implementation of the countAnswers function seems to be causing issues in resolving the problem.

The statement return answersCount; within the callback function is incorrect as it returns from the inner function and not from the actual countAnswers function. This leads to a situation where the function does not return any value. Since the execution of AnswersQueries.getAnswers is asynchronous, you cannot directly use its result for further operations.

To address this issue, it is recommended to store the values within the scope and update them inside the callback function.

$scope.counts = {};
$scope.countAnswers = function(questionId) {
  AnswersQueries.getAnswers(questionId, function(answers) {
    $scope.counts[questionId] = answers.length;
  });
};

// Invoke $scope.countAnswers for each question in your scope *once*

The corresponding HTML code should be structured as follows:

<div>{{counts[question._id]}}</div>

Answer 3

Answer №2

Angular will check every binding during a digest cycle. An automatic trigger for a digest cycle is when $resource (or rather, $http used by $resource) receives a response.

If your template binds to an expression that calls the function countAnswers, it creates a new $resource query each time. This leads to a cycle where an http call is made on digest, then another on receiving the response, and so on.

To resolve this issue, consider caching the result from the initial http call. This way, subsequent calls to 'countAnswers' will refer back to the cached result instead of making multiple http requests.

Here's an example:

var answersCounts = {};
var hasRequestedAnswers = {};
$scope.countAnswers = function(questionid) {
  if (!hasRequestedAnswers[questionid]) {
    AnswersQueries.getAnswers(questionid, function(answers) {
      answersCounts[questionid] = answers.length;
    });
    hasRequestedAnswers[questionid] = true;
  }
  return answersCounts[questionid];
};

Answer 4

Angular will check every binding during a digest cycle. An automatic trigger for a digest cycle is when $resource (or rather, $http used by $resource) receives a response.

If your template binds to an expression that calls the function countAnswers, it creates a new $resource query each time. This leads to a cycle where an http call is made on digest, then another on receiving the response, and so on.

To resolve this issue, consider caching the result from the initial http call. This way, subsequent calls to 'countAnswers' will refer back to the cached result instead of making multiple http requests.

Here's an example:

var answersCounts = {};
var hasRequestedAnswers = {};
$scope.countAnswers = function(questionid) {
  if (!hasRequestedAnswers[questionid]) {
    AnswersQueries.getAnswers(questionid, function(answers) {
      answersCounts[questionid] = answers.length;
    });
    hasRequestedAnswers[questionid] = true;
  }
  return answersCounts[questionid];
};

The issue of continuous requests in AngularJS controllers

Answer №1

Answer №2

Similar questions

Determining the specific button pressed using jQuery

Can you show me a comprehensive list of all the REST endpoints for Express mounted Apps?

Is Protractor compatible with Internet Explorer 9?

Selenium and PhantomJS are having trouble interpreting JavaScript code

Having difficulty with pagination within a callback function

Ensuring precise accuracy in JavaScript; transforming 0.5 into 0.5000

What is the best way to deliver flash messages using Express 4.0?

Tips on utilizing the useState hook for storing numerous key objects?

Download a file on button click using JavaScript with data extracted from the DOM

Is it possible to view the object sent from AJAX to PHP in PHP using a debugger?

What is the best way to transfer variables between two Vue files?

Avoid activating jQuery functions based on certain screen widths for menu/navigation system

What is a clear indication that a <div> is filled with text?

Populating JQuery autocomplete using a PHP array

Obtain the key by using the JSON value

Receive regular updates every week for an entire month using Javascript

Choose or deselect images from a selection

Pressing the button will allow you to select and copy the text within the

"After completing the survey form, the User Details form is displayed upon clicking the submit button

Exploring the functionality of the MediaPicker property editor within a custom property in Umbraco