How to finish executing $http.get first before running any code in angular

Question

I have this method in my service to get a user

getUser : function () {
  console.log("get user");
  token = authService.getToken();
  userID = jwtHelper.decodeToken(token);

  console.log(token);
  console.log(userID);

  return $http.get(httpHost + '/users/' + userID).success(function (data) {
     user = data;
     console.log(user);
     return data;
  });
  },

I ran this service in .run of angular Then in my controller I'm getting the data so to present the user's name in my view
$scope.userName = userService.getFirstName() + " " + userService.getLastName();.
It will run well most of the time, but there are times that when there is a delay in getting the user the controller will be executed first leaving the $scope.username with undefined values.
How can I make my program to wait for the getUser() to return the user's data first before running the controller??

Are you sure you want to do that ? Angular works asynchronously, and you're trying to run a synchronous process. Usually, when fetching data, you'd display some pre-loading animation (e.g. throbbers). Then when the data is fetched, you remove the animation and replace it with the actual data. This can be done in pure CSS, or programatically using pure JS or a custom Angular directive. — ethanfar
– ethanfar, Commented Jun 7, 2015 at 4:21

Devin H. · Accepted Answer · 2015-06-07 04:11:36Z

1

$http.get returns a promise. So what you can do is whenever you call getUser is do:

service.getUser().then(function(response){ //stuff you need to do on finish here });

answered Jun 7, 2015 at 4:11

Devin H.

1,1051 gold badge11 silver badges20 bronze badges

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

Comments

twitch · Accepted Answer · 2015-06-07 04:22:21Z

0

You need to use $q services
.ABCController($scope,$http,$q){
getUser : function () {
  var deferred = $q.defer();
  console.log("get user");
  token = authService.getToken();
  userID = jwtHelper.decodeToken(token);

  console.log(token);
  console.log(userID);

  return $http.get(httpHost + '/users/' + userID).success(function (data) {
     user = data;
     console.log(user);
     deferred.resolve(user)
     return deferred.promise;
  });
  },

answered Jun 7, 2015 at 4:22

twitch

2251 silver badge13 bronze badges

4 Comments

Devin H. Over a year ago

Is there a reason why just using the then function is not sufficient in this case?

twitch Over a year ago

"then" function is a property of $q(service) I tried using it without defining it it gaved an error.

Devin H. Over a year ago

Actually, it's not. docs.angularjs.org/api/ng/service/$http Look at the return value. then is a function included with an HttpPromise. You must have something else going on, because then works fine for me without including $q.

twitch Over a year ago

I have seen a lot of people using then without $q, but I everytime I use it, it gives an error. I have a service.js file and a controller.js The controller calls the service.js which fetches the data and then initialisation of $scope is done in the controller.js

Collectives™ on Stack Overflow

How to finish executing $http.get first before running any code in angular

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related