2

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?

9
  • 1
    Change service to factory Commented Dec 16, 2015 at 14:19
  • 4
    did you try using loadDay() instead of loadDay? Considering its a function... Commented Dec 16, 2015 at 14:19
  • @nem has got the answer, but the way you are using the service is actually how you use a factory, if you were using the service properly then you would have declared loadDay like this: this.loadDay = function () {} with out returning anything Commented Dec 16, 2015 at 14:20
  • 2
    You are also not returning anything from the loadDay function Commented Dec 16, 2015 at 14:23
  • 1
    you have to return the $http also Commented Dec 16, 2015 at 14:25

5 Answers 5

3

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.');
        });
    }
 };
Sign up to request clarification or add additional context in comments.

Comments

3
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.');
            }
        );
    };
}]);

Comments

1

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
  });

Comments

0
 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());

Comments

0

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 */
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.