getting Error: [$rootScope:inprog] $digest already in progress when changed from Fetch to $http + $q

Question

I'm trying to do a http request inside Angular.js factory. Initially I had used Fetch API and the console didn't show any error. I implemented it using $http along with $q and now it shows errors on my console even though the functionality seems to work.

I'm getting

"Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.4.0/$rootScope/inprog?p0=%24digest
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js:68:12
    at beginPhase (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js:16073:15)
    at Scope.$apply (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js:15817:11)
    at n.<anonymous> (https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-d35c4e85-c842-3510-cf4e-9d0946fca47f:96:16)
    at n.emit (https://cdnjs.cloudflare.com/ajax/libs/algoliasearch-helper-js/2.28.1/algoliasearch.helper.min.js:1:2344)
    at https://cdnjs.cloudflare.com/ajax/libs/algoliasearch-helper-js/2.28.1/algoliasearch.helper.min.js:4:24433
    at n (https://cdnjs.cloudflare.com/ajax/libs/algoliasearch-helper-js/2.28.1/algoliasearch.helper.min.js:1:8521)
    at n (https://cdnjs.cloudflare.com/ajax/libs/algoliasearch-helper-js/2.28.1/algoliasearch.helper.min.js:2:26916)
    at n._dispatchAlgoliaResponse (https://cdnjs.cloudflare.com/ajax/libs/algoliasearch-helper-js/2.28.1/algoliasearch.helper.min.js:4:24330)
    at processQueue (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js:14454:28)"

I'm new to Angular.js and not sure what's going on.
The codepen of my implementation https://codepen.io/cmgchess/pen/GRMLLwV

my factory

var index = 'bestbuy';
var alSH = angular.module('AlgoliaSearchHelper', ['ngSanitize']);

// Expose the helper
alSH.factory('helper',helper);

helper.$inject = ['$http', '$rootScope', '$q'];

function helper($http, $rootScope, $q) {

  
  
  var customSearchClient = {
    search(requests) {
      var deferred = $q.defer();
      $http.post('https://algolia-backend-search.herokuapp.com/search',{requests}).success(function (response) {
        deferred.resolve(response);

      });
      return deferred.promise;
    }
    // search(requests, cb) {
    //   return fetch('https://algolia-backend-search.herokuapp.com/search', {
    //     method: 'post',
    //     headers: {
    //       'Content-Type': 'application/json',
    //     },
    //     body: JSON.stringify({ requests }),
    //   }).then(function(res){return res.json()}).then(cb)
    // }
  };
  
  
  return algoliasearchHelper(customSearchClient, index, {
    disjunctiveFacets: ['category'],
    hitsPerPage: 7,
    maxValuesPerFacet: 3
  });
};

cmgchess · Accepted Answer · 2022-01-19T09:20:58.790

I had used $scope.$apply on 3 seperate places in https://codepen.io/cmgchess/pen/GRMLLwV

    helper.on('result', results => {
         $scope.$apply($scope.something = results.something );
    });

I came across this article https://medium.com/@TuiZ/digest-already-in-progress-c0f97a6becfc and it states that

In a promise Using $q, the Angular’s promise library, you are sure to be in the Angular context, so no need to $apply or $digest
Angular create a new $digest only cycle, when the promise is resolved, so if you call $scope.$digest() or $apply() inside the promise resolve callback, you will get “$digest already in progress”

So what i did was change all places I had used $scope.$apply such that

    helper.on('result', results => {
         $scope.something = results.something;
    });

and now I'm not getting the error. I'm not sure if I'am understanding this very well so I appreciate if somebody gives a better answer.

getting Error: [$rootScope:inprog] $digest already in progress when changed from Fetch to $http + $q

1 Answers1