Unable to access $http response data in Angular JS factory

Question

I am trying to save $http response data in a variable inside angularJS factory. But I could not access the response outside the http method. It is showing undefined. I checked this link Injecting $scope into an angular service function() Please let me know how to handle this. Below is the factory code:

angular.module('myapp')
  .factory('CardNumberFactory',['$http', function ($http) {
    // Service logic
    var details={};
  
    $http.get('scripts/services/mock.json')
      .then(function(responce){       
        var resopnceData = responce.data;
            details=resopnceData;
      });

    console.log(details);
    return {details:details};
}]);

At the time that you are logging the variable, it is still undefined. It only becomes defined inside .then, which happens asynchronously some time later. — New Dev
– New Dev, Commented Feb 26, 2015 at 15:36
return $http.get(..) instead - this returns a promise - and .then it in the controller and assign the return value to your $scope — New Dev
– New Dev, Commented Feb 26, 2015 at 15:44

Artyom Kiriliyk · Accepted Answer · 2016-04-18 16:42:31Z

2

Because the $http service is asynchrony. You should do this like that:

angular.module('myapp')
  .factory('CardNumberFactory',['$http', function ($http) {

    var details={};

    function getData() {
      return $http.get('scripts/services/mock.json')
       .then(function(response){
         return {details: response.data}
      });      
    }

    return {

        getData: getData

     }

}]);

angular.module('myapp').controller('TestController, function($scope,CardNumberFactory) {

  CardNumberFactory.getData().then(function(res) {
      //  res is the {details} object
  })

})

edited Apr 18, 2016 at 16:42

Artyom Kiriliyk

2,5131 gold badge19 silver badges21 bronze badges

answered Feb 26, 2015 at 16:40

Bazinga

11.3k7 gold badges42 silver badges66 bronze badges

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

2 Comments

srinivas Over a year ago

I followed the same way and superb it is working! But i am trying to save the response data in separate global variable to share the data with another controller. How can i do this?

Bazinga Over a year ago

You can inject the factory to any controller that you want and call this function and grab the data or you can make a constant and save the data there, there is many ways.

Collectives™ on Stack Overflow

Unable to access $http response data in Angular JS factory

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related