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

By pressing the "showMore" button, the page dynamically pulls in a json list from a file

Jade not responding to AngularJS click directive function

Clicking on a class within a single tag can be selected using

Angular Controller issue: 'MainCtrl' variable is not recognized as a function, it is showing as undefined

Create a list with interconnected input fields for duplication

AngularJS: The creation of a unique custom filter in Angular causing an infinite loop issue

Having trouble receiving values sent through AJAX POST requests to PHP

How to adjust the timezone settings in PHPMyAdmin on a shared server platform

Ways to integrate npm dependencies into your Cordova plugin

Resuming AJAX requests after being aborted

This marks my initial attempt at developing an Angular project using Git Bash, and the outcome is quite remarkable

Unable to trigger the show_popup function by clicking the button

The antithesis of jQuery's .parents() selector

AngularJS chatbox widget for interactive communication

Exploring a one-dimensional nested array in order to make updates to the higher level nodes

What is the best way to add a color swatch image using Javascript?

The click event for jQuery is failing to trigger on every link

Is it possible to convert checkbox values from a form into a JSON format?

Node.js equivalent of Java's byteArray

Tips for successfully passing array index as an image source in Vuejs with v-img?