Angular $http returns data but doesn't apply to scope

Question

In angular, I have this factory

.factory('Users', function($http) {
  var users = [];

  return {
    getUsers: function() {
      return $http.get("data.json")
        .then(function(response) {
          users = response.data;
          return users;        
        });
    },
    getUser: function(id) {
      for (i = 0; i < users.length; i++) {
        if (users[i].id == id) {
          return users[i];
        }
      }
      return null;
    }
  }
})

And then load that data in my controller

.controller('SessionsCtrl', function($scope, Users) {
  $scope.users = Users.getUsers();
})

If I console.log the response from the http request, I am getting the data, but for some reason, the scope data won't update.

I've seen examples where the controller would look like this

Users.getUsers().then(function(data) {
    $scope.users = data;
});

but from my understanding, I shouldn't need to since $http is already returning a promise. Am I missing something? Do I need to involve $q at all?

ms87 · Accepted Answer · 2015-02-22 06:35:38Z

This will work:

 getUsers: function() {
      return $http.get("data.json");
    },

and:

Users.getUsers().then(function(data) {
    $scope.users = data.data;
});

What you wrote however will not work, simply because you can't directly return a result from an operation that will complete later such as a $http call. The problem with this:

 getUsers: function() {
      return $http.get("data.json")
        .then(function(response) {
          users = response.data;
          return users;        
        });
    },

Is that by the time the return users; line executes the ajax call is still in progress and nothing has been returned yet, so you will get nothing for users. For what you're looking to do I would go about using a callback:

 getUsers: function(callback) {
        $http.get("data.json")
         .then(function(response) {
          users = response.data;
          callback(users);        
        });
    },

Usage:

Users.getUsers(function(data) {
    $scope.users = data;
});

sma · Accepted Answer · 2015-02-22 06:32:32Z

0

Your getUsers function is still returning a promise because its returning the value of $http.get. So, yes, the value you're assigning to $scope.users is a promise. You'll have to handle the promise to set the value to $scope.users according to your example above:

Users.getUsers().then(function(data) {
    $scope.users = data;
});

answered Feb 22, 2015 at 6:32

sma

9,5978 gold badges53 silver badges83 bronze badges

Collectives™ on Stack Overflow

Angular $http returns data but doesn't apply to scope

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related