Angular Service - Return http response

Question

I'm trying to build an angular service I can reuse for doing my http requests etc. This all works when it's not in a service.

The following code works and does the login, but the log of $scope.data is always undefined. If i put a log in on the success before I return data it returns the data, but not back to the controller which is what i'm really looking to do.

Just for clarification, I want to be able to access the json data returned from the server as 'data' in the success in my controller.

//App.js

.service('SaveSubmitService', function ($http, $log) {
    this.addItem = function(url, options){
        var xsrf = $.param({
            Username: options.Username,
            Password: options.Password
    });

    $http({
        method: 'POST',
        url: url,
        data: xsrf,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).success(function(data, status, headers, config) {
            return data;

    }).
        error(function(data, status, headers, config) {
            console.log(data);
            return false;


   });
    }

})

Controller:

.controller('LoginCtrl', function ($scope, $stateParams, $location, $ionicLoading, $http, SaveSubmitService, $log) {
        if (localStorage.getItem("SessionKey")) {
            $location.path('home');
        }
        $scope.login = {};
        $scope.doLogin = function doLogin() {

           $scope.data = SaveSubmitService.addItem('http://*****/Services/Account.asmx/Login', $scope.login);
           $log.info($scope.data);

        };
    })

you need to wait until promise is resolved var promise = SaveSubmitService.addItem('http://*****/Services/Account.asmx/Login', $scope.login); promise.then(function(data){$scope.data = data}) — Pankaj Parkar
– Pankaj Parkar, Commented Feb 16, 2015 at 15:36
You can not return from an ajax call, it will return a promise which can be extended with .then — Michelangelo
– Michelangelo, Commented Feb 16, 2015 at 15:37

dfsq · Accepted Answer · 2015-11-03 10:33:16Z

3

First of all make SaveSubmitService return promise object. Then use its API to provide a callback to be executed once data is loaded:

.service('SaveSubmitService', function ($http, $log) {
    this.addItem = function (url, options) {

        var xsrf = $.param({
            Username: options.Username,
            Password: options.Password
        });

        return $http({
            method: 'POST',
            url: url,
            data: xsrf,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
        .then(function(response) {
            return response.data;
        })
        .catch(function(error) {
            $log.error('ERROR:', error);
            throw error;
        });
    }
});

And the you will use it like this in controller:

$scope.doLogin = function doLogin() {
    SaveSubmitService.addItem('http://*****/Services/Account.asmx/Login', $scope.login).then(function(data) {
        $scope.data = data;
        $log.info($scope.data);
    });
};

Note, how you return result of $http function call, it returns Promise which you use in controller.

edited Nov 3, 2015 at 10:33

answered Feb 16, 2015 at 15:36

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

5 Comments

MissCoder87 Over a year ago

That makes sense. The only thing i don't get is data is undefined on the controller

dfsq Over a year ago

Make sure to access data inside then callback, not outside.

MissCoder87 Over a year ago

I am, your exact code falls over with data is not defined

dfsq Over a year ago

Is data defined in success block: console.log(data)? You get in then block whatever you return from success.

dfsq Over a year ago

oops, sorry there was a type in my code, it should be .then(function(data) {...}. Check updated code, I forgot data before.

Pankaj Parkar · Accepted Answer · 2015-02-16 15:39:37Z

0

saveSubmitService Service method is returning promise and it can be resolved using .then(function())

Your controller code will look like below.

CODE

$scope.doLogin = function doLogin() {
    var promise = saveSubmitService.addItem('http://*****/Services/Account.asmx/Login', $scope.login);
    promise.then(function(data) {
        $scope.data = data
    });
};

Thanks

answered Feb 16, 2015 at 15:39

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

micronyks · Accepted Answer · 2015-02-16 15:45:59Z

.factory('SaveSubmitService', function ($http, $log) {
    return{
    getData:function(url,xsrf)
    {
           $http({
                  method: 'POST',
                  url: url,
                  data: xsrf,
                  headers: {
                 'Content-Type': 'application/x-www-form-urlencoded'
                 }
          }).success(function(data, status, headers, config) {
               return data;

          }).
             error(function(data, status, headers, config) {
             console.log(data);
             return false;


         });
    }
   }

})


.controller('LoginCtrl', function ($scope, $stateParams, $location, $ionicLoading, $http, SaveSubmitService, $log) {
        if (localStorage.getItem("SessionKey")) {
            $location.path('home');
        }
        $scope.login = {};
        $scope.doLogin = function doLogin() {

           $scope.data = SaveSubmitService.addItem(, );
           $log.info($scope.data);

        };

               SaveSubmitService.getData('http://*****/Services/Account.asmx/Login',$scope.login).success(function(data,status){
                 $scope.data
                 }).error(function(data,status){ });
    )};

Collectives™ on Stack Overflow

Angular Service - Return http response

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related