Angular JS, factory returns data, but in controller it is gone

Question

I have started to learn something about AngularJS. I managed to create some simple controllers, but I would like to do a bit of refactoring and create also a factory.

Here is one of my js files:

angular
.module('myApp', ['ngResource'])
.factory('UserFactory', ['$http', function ($http) {
    return {
        getOne: function () {
            $http({method: 'GET', url: 'http://localhost:8080/login/login'})
                .success(function (data, status, headers, config) {
                    console.info(data);
                    return data;
                })
                .error(function (data, status, headers, config) {
                    alert("failure");
                });
        }
    }
}])
.controller('UserController', ['$scope', 'UserFactory', function ($scope, UserFactory) {
    $scope.user = UserFactory.getOne();
}]);

The program correctly prints the data to the console received from the servlet at that line: console.info(data);
But the controller does not return anything to the view. I put here also console.info(UserFactory.getOne()) and it prints undefined.

Where is my coding mistake?

If you look at the code carefully you will see that you aren't returning anything from your getOne function. — PSL, Oct 24 '15 at 14:02
Possible duplicate of [How to return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — MinusFour, Oct 24 '15 at 14:33

score 2 · Accepted Answer · answered Oct 24 '15 at 16:27

getOne needs to return a value, and in this case it'll be a promise from $http. The success method should return the value needed by the controller.

.factory('UserFactory', ['$http', function ($http) {
return {
    getOne: function () {
        return $http({method: 'GET', url: 'http://localhost:8080/login/login'})
            .success(function (data, status, headers, config) {
                return data;
            });
    }
}
}]);

Now in your controller you can handle that result.

app.controller('UserController', ['$scope', 'UserFactory', function ($scope, UserFactory) {
 UserFactory.getOne().then(function(data){
      $scope.user = data;
 });
}]);

The success and failure methods are depreciated. You should try using then instead.

.factory('UserFactory', ['$http', function ($http) {
return {
    getOne: function () {
        return $http({method: 'GET', url: 'http://localhost:8080/login/login'})
            .then(function (response) {
                return response.data;
            });
    }
}
}]);

Vinodhan · Answer 2 · 2015-10-24T16:21:20.130

Your factory return at the wrong place, so it return undefined. you can fix it by handling success in controller itself. try this.

var app = angular.module('plunker', []);

app.factory('UserFactory', ['$http', function ($http) {
   return {
       getOne: function (callback) {
          $http({method: 'GET', url: 'request_url'})
            .success(function (data, status, headers, config) {
                callback(data, status, headers, config);
            })
            .error(function (data, status, headers, config) {
                alert("failure");
            });
    }
}
}]);

app.controller('UserController', ['$scope', 'UserFactory', function ($scope, UserFactory) {
     UserFactory.getOne(function(data){
          $scope.user = data;
     });
}]);

WORKING URL : DEMO

Angular JS, factory returns data, but in controller it is gone

2 Answers2