How to make the controller wait for factory response in angularjs?

Question

I am trying to get the response from factory to controller. but when i am calling a function of factory from controller, then the controller not waiting for its response. and giving "undefined".

here it is my controller.js

app.controller('customerCommentsController',function($scope,$http,$stateParams,$sce,$timeout,Comments){     

var commentsdata = '';

Comments.init(1,5);

$scope.total_comments = Comments.total();
console.log($scope.total_comments); //undefined 

$scope.positive_comments = Comments.positive();
console.log($scope.positive_comments);  //undefined 

$scope.commentsdata = Comments.getcomments(1,30);       
console.log($scope.commentsdata);   //undefined     
});

here I am calling init() method which gets the response from ajax, which takes some time to execute , but before it could complete, the other 2 statement (total() and positive() method) execute below the init method. and that not gets initialize because of init method not completed. and that why I am getting undefined. and same problem is coming when I am calling getcomments method which doesn't wait for its response.

here it is my factory

app.factory("Comments",function($http,$timeout,$q){

var commentshtml = [];
var commentshtml1 = [];

return {
    init :  function(start,end) {  
    var request = $http({   
            method:"post",
            url:"/comments.php",
            data: {start:start,end:end},                
            headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
        });     

    request.success(function(data){                 
            commentshtml = data;            
        });             
    },      
    total : function() {

                return commentshtml.total_comment;                    
    },
    positive : function(){

            return commentshtml.per_positive_comment;               
    },
    getcomments : function(start,end) { 

        var promise  = $http({  
            method:"post",
            url:"/comments.php",
            data: {start:start,end:end},                
            headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
        });

        promise.success(function(data){                 
            commentshtml1 = data.comments;
            console.log(commentshtml1); //giving the object             
            return commentshtml1;   
        }); 

    }
};

you should use a deferred object (see Ignat's answer below) or at least callback. — pietro909
– pietro909, Commented Sep 1, 2015 at 8:33

pietro909 · Accepted Answer · 2015-09-01 08:40:39Z

2

it's better to use $q module to work with asynchronous functions in angular. Read this docs:

$q documentation

edited Sep 1, 2015 at 8:40

pietro909

1,8611 gold badge19 silver badges28 bronze badges

answered Sep 1, 2015 at 8:27

Ignat Galkin

7171 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Per Henrik Lausten · Accepted Answer · 2019-03-01 13:08:52Z

1

Do this way:

In factory

   return {
    init :  function(start,end) {  
     return $http({     //return the promise 
            method:"post",
            url:"/comments.php",
            data: {start:start,end:end},                
            headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
        });     
    }
  getcomments : function(start,end) { 
             return $http({   //return the promise
            method:"post",
            url:"/comments.php",
            data: {start:start,end:end},                
            headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
        });

}

In Controller

Comments.init(1,5).then(function(){
 $scope.total_comments = Comments.total();
console.log($scope.total_comments);  

  $scope.positive_comments = Comments.positive();
console.log($scope.positive_comments);
 });
Comments.getcomments(1,30).then(function(data){
  $scope.commentsdata =data.comments;

})

Or the best way use resolve property in ng-route or ui-router

edited Mar 1, 2019 at 13:08

Per Henrik Lausten

21.8k3 gold badges32 silver badges79 bronze badges

answered Sep 1, 2015 at 8:27

Saurabh Ahuja

4733 silver badges13 bronze badges

1 Comment

sumitjainjr Over a year ago

:- Thanks for your help. It worked for me. thanks a lot :)

Paul Boutes · Accepted Answer · 2015-09-01 09:01:43Z

You are performing asynchronous request, the problem is that you retrieve data before she is defined.

A good practice is to use promise. You hace to know that the $http service return promises, and has some callback method, like .success() and .then() for example.

For promise, angular provide us a pretty good tool : $q.defer().

$q.defer() is a promise manager from the deferred API.

$q.defer() get 2 methods :

resolve(value) : which resolve our associated promise, by giving her the final value
reject(reason) : which resolve an promise error.

So you can do the following :

Controller

(function(){

function Controller($scope, Comments) {

  //Retrieve our init promise
  var promise_init = Comments.init();

  //Retrieve our total promise
  var promise_total = Comments.total();

  promise_init.then(function(){
    //Return promise for chaining
    return promise_total;
  }).then(function(total){
    //Retrieve total of comments
    $scope.total = total;
  }).catch(function(err){
    //Catch error of total comments
    $scope.total = err;
  });

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

Service

(function(){

  function Service($q){

    var commentshtml = [];

    function init(){
      //Create defer object
      var defer = $q.defer();
      commentshtml = ['a', 'b', 'c'];
      //Simulate latency
      setTimeout(function(){
        //Resolve our promise
        defer.resolve();
      }, 2000);

      //Return a promise
      return defer.promise;
    }

    function total(){
      var defer = $q.defer();
      commentshtml.length < 3
      ? defer.reject('error length')
      : defer.resolve(commentshtml.length);
      return defer.promise;
    }


    return {
      init: init,
      total: total
    };

  }

  angular
    .module('app')
    .factory('Comments', Service);

})();

HTML

  <body ng-app='app' ng-controller='ctrl'>

    <h2>Total : {{total}}</h2>

  </body>

You can see the Working Plunker

gaurav bhavsar · Accepted Answer · 2015-09-01 08:40:35Z

Write your all $scope variable in then function.

So your Controller.js :

app.controller('customerCommentsController',function($scope,$http,$stateParams,$sce,$timeout,Comments){     

    var commentsdata = '';

    Comments.init(1,5).then(function(){

         $scope.total_comments = Comments.total();
         console.log($scope.total_comments); //undefined 

         $scope.positive_comments = Comments.positive();
         console.log($scope.positive_comments);  //undefined 

         $scope.commentsdata = Comments.getcomments(1,30);       
         console.log($scope.commentsdata);   //undefined     
    }
});

You have to return your $http request.

So your init function look like :

init : function(start,end) {  
return $http({   
        method:"post",
        url:"/comments.php",
        data: {start:start,end:end},                
        headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
    }).success(function(data){
          return commentshtml = data;
    });
}

And your Factory :

app.factory("Comments",function($http,$timeout,$q){

var commentshtml = [];
var commentshtml1 = [];

return {
init :  function(start,end) {  
return $http({   
        method:"post",
        url:"/comments.php",
        data: {start:start,end:end},                
        headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
    }).success(function(data){
          return commentshtml = data;
    });
},      
total : function() {

            return commentshtml.total_comment;                    
},
positive : function(){

        return commentshtml.per_positive_comment;               
},
getcomments : function(start,end) { 

    var promise  = $http({  
        method:"post",
        url:"/comments.php",
        data: {start:start,end:end},                
        headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
    });

    promise.success(function(data){                 
        commentshtml1 = data.comments;
        console.log(commentshtml1); //giving the object             
        return commentshtml1;   
    });

bhaskar:- If I use then function , then I am getting error "TypeError: Cannot read property 'then' of undefined".
Yes because you didn't return factory init function's $http.

Collectives™ on Stack Overflow

How to make the controller wait for factory response in angularjs?

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related