Angular service injection (async) not working

Question

I'm want to use data stored in one service in another service.

Problem: The callback function for data retrieval seems to be async, and I can't apply my methods for the retrieved data.

What data retrieval looks like

app.factory('userService', ['$http', 'rootUserService', function ($http, rootUserService) {
  var user = null;
  var rootUser;

  return {
    getUser : function(userId) {
      var that = this;

      rootUserService.getUser().then(function(data) {
        that.rootUser = data;
        console.log(data) // working
      });
      console.log(that.rootUser) // undefined
      console.log(rootUser) // undefined

      // Do some stuff with rootuser (another async call & compare users)
    }
  }
}]);

Where data is retrieved from:

app.factory('rootUserService', ['$http', '$rootScope', function($http, $rootScope) {
  var user = null;
  return {
    makeRequest: function(url) {
      var that = this;
      return $http.get(url).then(function (res) {
        return res.data;
      });
    },

    // This is what is used for retrieval
    getUser: function() {
      if(!this.user) { this.user = this.makeRequest('/api/user/get'); };
      return this.user;
    }
  }
}]);

Use this in the 'userService' factory: rootUserService.getUser().then(function(data) { console.log('is this running?'); // doesn't show up in console. that.rootUser = data; }, function(err) { console.log(err); }); Post what the error looks like. — , May 18 '15 at 19:17
@Stefan, no errors, it's working now. @PSL, ajax did make it. Context of the question is slightly changed. See `getUser` — dmr07, May 18 '15 at 19:34
you need to put the console.logs in the `then()` function too — reptilicus, May 18 '15 at 19:36
@danm07 you need to chain through while using it (ex in a controller) as well... i.e `userService.getUser (id).then(function(user){ $scope.user = user});`. Also return from userService i.e `return rootUserService.getUser()...` — PSL, May 18 '15 at 19:52

reptilicus · Answer 1 · 2015-05-18T19:44:32.770

The getUser() method in the service should return the promise to resolve. Something like this:

app.factory('rootUserService', ['$http', '$rootScope', function($http, $rootScope) {
  var user = null;
  return {
    makeRequest: function(url) {
      var that = this;
      return $http.get(url).then(function (res) {
        return res.data;
      });
    },

    // This is what is used for retrieval
    getUser: function() {
      if(!this.user) { 
       return this.makeRequest('/api/user/get').then(function(resp) {
           this.user=data;
           return data;
        }); 
      };
      return this.user;
    }
  }
}]);

app.factory('userService', ['$http', 'rootUserService', function ($http, rootUserService) {
  var user = null;
  var rootUser;

  return {
    getUser : function(userId) {
      var that = this;

      return rootUserService.getUser().then(function(data) {
        that.rootUser = data;
        console.log(data) // working
        // Do some stuff with rootuser (another async call & compare users)
        //All of those actions MUST BE IN HERE
      });
    }
  }
}]);

Angular service injection (async) not working

1 Answers1

Linked