AngularJS : service not returning value

Question

I'm trying to write an Angular service and it seems like there is something missing. My problem is its not returning any value to my Angular controller

getPrepTimes() method is not returning the http data

But when I check the network (via Chrome dev tools) it will correctly call the external api and return a json object as a response

#my service
'use strict';
angular.module('recipeapp')
  .service('prepTimeService',['$http', function($http){
      this.prepTime = getPrepTimes();

      function getPrepTimes(){
          $http({
            url: '/prep_times/index.json',
            method: 'GET'
          })
          .success(function (data, status, header, config){
            return data;
          });
      };
  }
  ]);




#controller
'use strict';

angular.module('recipeapp')
  .controller('recipeCtrl', ['$scope', 'prepTimeService', function($scope, prepTimeService){
     $scope.prep_time = prepTimeService.prepTime;
  }]);

When I checked the method getPrepTimes() with returning a string it works. What could be missing here?

It shouldn't work,...you can't return from an AJAX call, you have to use a callback. — tymeJV
– tymeJV, Commented Sep 15, 2014 at 14:25

tymeJV · Accepted Answer · 2014-09-15 14:28:53Z

12

A couple things are wrong with the above. You assign this.prepTime to getPrepTimes(). The () there will invoke getPrepTimes immediately, and not when you actually call it! You also need to utilize callbacks to get your data back and use it:

angular.module('recipeapp').service('prepTimeService',['$http', function($http){
    this.prepTime = getPrepTimes;

    function getPrepTimes(callback) {
        $http({
            url: '/prep_times/index.json',
            method: 'GET'
        }).success(function (data, status, header, config){
            callback(data);
        });
    };
}]);

And now use it like so:

 prepTimeService.prepTime(function(data) {
     $scope.prep_time = data;
 });

answered Sep 15, 2014 at 14:28

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Comments

bmleite · Accepted Answer · 2014-09-15 14:28:01Z

1

Calls to the $http service are async, which means you need to return a promise (and not a value):

this.prepTime = function() {
    return $http({
      url: '/prep_times/index.json',
      method: 'GET'
    });          
};

And on the controller:

angular.module('recipeapp')
  .controller('recipeCtrl', ['$scope', 'prepTimeService', function($scope, prepTimeService){
    $scope.prep_time = prepTimeService.prepTime()
      .success(function (data, status, header, config){
        $scope.someVar = data;
      });
}]);

answered Sep 15, 2014 at 14:28

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

Comments

Maxim Shoustin · Accepted Answer · 2014-09-15 14:48:10Z

1

Wrap answer with promise:

var self = this;

var deferred = $q.defer();

self.getPrepTimes = function() {
        $http({
            url: '/prep_times/index.json',
            method: 'GET'
        })
                .success(function(data, status, headers, config) {

                    if (data.error === undefined) {
                        deferred.resolve(data);
                    } else {
                        if (data.error !== undefined) {

                        } else {
                            deferred.reject(data);
                        }
                    }

                }).error(function(data, status, headers, config) {
            deferred.reject(data);
        });
        return deferred.promise;
    };

In controller call it:

 prepTimeService.getPrepTimes().then(function(result) {
     $scope.prep_time = result;
    },
    function(error) { 
     // show alert           
   });

edited Sep 15, 2014 at 14:48

answered Sep 15, 2014 at 14:28

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

2 Comments

sameera207 Over a year ago

thanks for the answer, I'm pretty new to angular and for me promise are still bit confusing.. so trying to keep away from them for the moment :)

Maxim Shoustin Over a year ago

@sameera207 for the future homework :) promises give you ability to pass to controller also errors. Consider that http failed and you want to show up some popup, in this case you reject the answer and in controller enter to function(error)

Collectives™ on Stack Overflow

AngularJS : service not returning value

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related