Angular use $http promise data in controller

Question

I am trying to use an $http promise from a factory withing my controller. Code below works, and I can view the users variable in the view by calling {{users}}

Working Factory:

.factory('bidsCreatedSimple', ['$http', function($http) {
    // Expose public API first, use func notation
      return { 
          getUsers: getUsers,
      };

      function getUsers(){
          return $http.get('/bids.json');
      }
}])

In the controller:

$scope.users = []; //visible in the view

activate();

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

console.log($scope.users); //returns a blank [] even though
                           //it renders with data in the view

How can I use the $scope.users variable in my controller? I need to use it's data for some other objects in the controller.

Gonzalo.- · Accepted Answer · 2017-03-02 02:53:58Z

2

your code is fine. $scope.users DOES get filled with data, but your console.log($scope.users) is executed before the $http request returns - therefore you're console.logging the empty array you declare at the top of your code.

add the console.log line in the callback and you'll see your users (assuming data is returning correctly from your backend)

bidsCreatedSimple.getUsers().then(function(users){
      $scope.users = users.data;
      // here $scope.users is filled with the .json data
      console.log($scope.users)
      // put here your code to manipulate users (or call a function that does that properly)
    });
// here the $scope.users is undefined, because when this line executes, the request from get users hasn't returned yet (and the callback function hasn't executed either)
console.log($scope.users)

This is due to asynchrony in the ajax request - you need to wait for data until the request returns in order to use it.

edited Mar 2, 2017 at 2:53

answered Mar 2, 2017 at 2:39

Gonzalo.-

12.7k5 gold badges53 silver badges84 bronze badges

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

10 Comments

GavinBelson Over a year ago

Right, but I have a bunch of objects in the controller that use $scope.users. For example $scope.gridOptions.data needs to be set to $scope.users in order for a library to render a grid. How would I set those variables to the users data?

Gonzalo.- Over a year ago

are you using angular-ui ? I haven't used it, but you probably can set the reference to $scope.users, and then use some refresh method or something similar. Like stackoverflow.com/questions/26634063/…

GavinBelson Over a year ago

But, how would I actually use that data in the controller? I need to pass it to some services as well, that will manipulate it

Gonzalo.- Over a year ago

just call your services using yourService($scope.users). But you need to be sure your request has returned, if not you will just pass an empty array. See my code where it says "put here code to manipulate users". If that's not what you're asking, then I don't understand your question. You might want to add some code about what you're trying to achieve.

Gonzalo.- Over a year ago

see my update. You might want to read something about asynchrony as well medium.freecodecamp.com/…

|

Collectives™ on Stack Overflow

Angular use $http promise data in controller

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related