update a service variable within an $http callback

Question

I'm using a service to make user data available to various controllers in my Angular app. I'm stuck trying to figure out how to use the $http service to update a variable local to the service (in my case "this.users"). I've tried with and without promises. The server is responding correctly.

I've read several excellent articles for how to use $http within a service to update the scope of a controller. The best being this one: http://sravi-kiran.blogspot.com/2013/03/MovingAjaxCallsToACustomServiceInAngularJS.html. That does not help me though because it negates the benefits of using a service. Mainly, modifying the scope in one controller does not modify throughout the rest of the app.

Here is what I have thus far.

app.service('UserService', ['$http', function($http) {
    this.users = [];

    this.load = function() {
        var promise = $http.get('users.json')
            .success(function(data){
                // this.users is undefined here
                console.log(this.users);
            }
    };

    promise.then(function() {
        // this.users is undefined here
        console.log('this.users');
    });
}]);

Any help is greatly appreciated. Thank you.

Answer 1

Try using

var users = [];

rather than

this.users = [];

and see what

console.log(users);

outputs in each of those cases.

Answer 2

Your service is oddly defined, but if you have a return in it you can access it from any controller:

app.service('UserService', ['$http', function($http) {
    var users = [];
    this.load = function() {
        var promise = $http.get('users.json')
            .success(function(data){
                // this.users is undefined here
                console.log(users);
                users = data.data;
            }
    };
    return {
        getUsers: function(){
            return users;
        }
    }  
}]);

so in your controller, you can use:

var myUsers = UserService.getUsers();

UPDATE to use a service correctly here, your service should return a promise and the promise should be accessed in the controller: Here's an example from another answer I gave

// your service should return a promise
app.service('PickerService', [$http', function($http) {
    return {
        getFiles: function(){ 
            return $http.get('files.json'); // this returns a promise, the promise is not executed here
        }
    }
}]);

then in your controller do this:

PickerService.getFiles().then(function(returnValues){ // the promise is executed here as the return values are here
    $scope.myDirectiveData = returnValues.data;
});

Answer 3

this does not have scope anymore where you are trying to use it do this instead:

app.service('UserService', [$http', function($http) {
var users = [];

this.load = function() {
    var promise = $http.get('users.json')
        .success(function(data){
            console.log(users);
        }
};

    promise.then(function() {
    console.log(users);
    });
}]);

all local variables to a service should just be vars if you assign them to this as a property than they will be included every time the service is injected into a controller which is bad practice.

Answer 4

I think what your asking for is a solution along the lines of defining your service like this:

angular.module('app')
  .service('User', function($http, $q) {
    var users = null;
    var deferred = $q.defer()

    return {
      getUsers: function() {
        if(users) {
          deferred.resolve(users);
        } else {

          $http.get('users.json');
            .success(function(result) {
              deferred.resolve(result);
            })
            .error(function(error) {
              deferred.reject(error);
            });
        }
        return deferred.promise;
      }
    };
  });

Then in one Each controller you would have to do this:

angular.module('app')
  .controller('ACtrl', function($scope, User) {
    User.getUsers().then(function(users) {
      // Same object that's in BCtrl
      $scope.users = users;
    });
  });

angular.module('app')
  .controller('BCtrl', function($scope, User) {
    User.getUsers().then(function(users) {
      // Same object that's in ACtrl
      $scope.users = users;
    });
  });

NOTE: Because the deferred.promise the same promise passed to all controllers, executing deferred.resolve(users) in the future will cause all then success callbacks in each of your controllers to be called essentially overwriting the old users list.

All operations on the list will be noticed in all controllers because the users array is a shared object at that point. This will only handle updates to the user list/each individual user on the client side of your application. If you want to persist changes to the server, you're going to have to add other $http methods to your service to handle CRUD operations on a user. This can generally be tricky and I highly advise that you check out ngResource, which takes care of basic RESTful operations