Angular js .then is not a function

Question

I have this service that loads data..

 angular.module('App').service('daysService', ['$http','$q',function($http,$q) {

    var days = [];

      return {
                 loadDay: function() {
                    $http({
                    method: 'get',
                    url: '/app/days/list/',
                  }).success(function(data) {              
                    days.push(data);
                    return days;  
                  }).error(function (data) {
                      console.log('Error checking server.');
                  });
                }
            };

      }]);

than in the controller i call the service

daysService.loadDay.then(function(data) {
   alert(data)
});

But i'm getting this error TypeError: daysService.loadDay.then is not a function

Any suggestion?

Answer 1

You are not returning anything from your loadDay function. Try this:

return {
    loadDay: function() {
        return $http({   // <-- return the promise
            method: 'get',
            url: '/app/days/list/',
        }).success(function(data) {              
            days.push(data);
            return days;  
        }).error(function (data) {
            console.log('Error checking server.');
        });
    }
 };

Answer 2

daysService.loadDay.then(function(data) {
   alert(data)
});

On the first line you are not calling loadDay like a function you are accessing it as a property. so you need to change it to this:

 daysService.loadDay().then(function(data) {
   alert(data)
});

Note the parenthesis on loadDay.

Secondly, you are using a service like a factory. So you have two options:

angular.module('App').service('daysService', ['$http','$q',function($http,$q) {   
    var days = [];

    this.loadDay = function() {
                    $http({
                    method: 'get',
                    url: '/app/days/list/',
                  }).success(function(data) {              
                    days.push(data);
                    return days;  
                  }).error(function (data) {
                      console.log('Error checking server.');
                  });
                };
      }]);

OR

angular.module('App').factory('daysService', ['$http','$q',function($http,$q) {
  var days = [];

  return {
             loadDay: function() {
                $http({
                method: 'get',
                url: '/app/days/list/',
              }).success(function(data) {              
                days.push(data);
                return days;  
              }).error(function (data) {
                  console.log('Error checking server.');
              });
            }
        };

  }]);

Finally, you aren't returning the promise from the function:

function() {
    return $http({
        method: 'get',
        url: '/app/days/list/',
    }).success(function(data) {
        days.push(data);
        return days;
    }).error(function(data) {
        console.log('Error checking server.');
    });
};

And if I were doing this, I would do:

angular.module('App').factory('daysService', ['$http', '$q', function($http, $q) {
    var days = [];

    this.loadDay = function() {
        return $http.get('/app/days/list/').then(
            function(data) {
              days.push(data);
              return days;
            },
            function(data) {
              console.log('Error checking server.');
            }
        );
    };
}]);

Answer 3

Your factory should return a promise instead of days if you want to use .then(). I believe you can do something like return $q.when(days) instead of return days and that should work.

Also just to note, .success() and .failure() callbacks are deprecated as of Angular 1.4. Not sure which version you're using, but $http now uses .then following this pattern:

$http({stuff}).then(function successCallback(response) {
    //success
  }, function errorCallback(response) {
    // error
  });

Answer 4

 angular.module('App').service('daysService', ['$http','$q',function($http,$q) {

var days = [];

  return {
             loadDay: function() {
                $http({
                method: 'get',
                url: '/app/days/list/',
              }).success(function(data) {              
                days.push(data);
                //return days;  
              }).error(function (data) {
                  console.log('Error checking server.');
              });
            },getDays: function(){ return days; }

        };

  }]);

---

daysService.loadDay(); $window.alert(daysService.getDays());

Answer 5

If you create a promise only then will you be able to use it with .then(). Check this document on how to create a promise. It is simple. https://docs.angularjs.org/api/ng/service/$q

You code is right now incapable of using .then() and the object/object property is not present so the error TypeError: daysService.loadDay.then is not a function. Else write a code that does not require you to use .then() but can work as normally triggered functions. That will work too.

/* In your service  */
angular.module('App').factory('daysService', ['$http',function($http) {

    var days = [];

      return {
                 loadDay: function() {
                    $http({
                    method: 'get',
                    url: '/app/days/list/',
                  }).success(function(data) {              
                    days.push(data);
                    return days;  
                  }).error(function (data) {
                      console.log('Error checking server.');
                      return;
                  });
                }
            };

      }]);

/* In your controller trigger the eventorclick */
$scope.trigger = function(){
$scope.modelname = daysService.loadDay(); /* returns days else undefined or null */
alert($scope.modelname); /* handle your issues if you have array of objects */
}