Angular setting variable as object through http

Question

I'm trying to set a variable as the data object returned from a http request in angular, but the variable never sets to even if it is in the $scope unless it is nested within the success function. For example, if I do this in the controller :

    $scope.hello = [];
       var getAppointmentsurl = './dbscripts/getAppointments.php';

          $http({method: 'GET', url: getAppointmentsurl}).success(function(data) {

                $scope.hello = data;
          });

          console.log($scope.hello);

}

Hello is blank... so I set it up in services.js like this :

 this.getCalendarData=function(){
        var hello = [];
           var getAppointmentsurl = './dbscripts/getAppointments.php';

              $http({method: 'GET', url: getAppointmentsurl}).success(function(data) {

                    hello = data;
              });

              return hello;

    }

but still hello is blank. Am I missing something obvious?

edit --

try to put the console.log or the return inside the function and you ll see the your results — Vanojx1, Aug 02 '16 at 13:50
Check [this](http://stackoverflow.com/questions/12505760/processing-http-response-in-service). $http is async and you should apply different methodology to get result of it. — Tuğca Eker, Aug 02 '16 at 13:52

score 3 · Accepted Answer · answered Aug 02 '16 at 13:51

3

 this.getCalendarData=function(){
       var getAppointmentsurl = './dbscripts/getAppointments.php';

          return $http({method: 'GET', url: getAppointmentsurl}).success(function(data) {

                return data;
          });


}

This is asynchronus call we have to return data like above.

answered Aug 02 '16 at 13:51

Akash Bhandwalkar

901
5
19

as http returns promise we have to resolve it in controller. as getCalendarData().then(function(){ here will be your data },function(error){ }) – Akash Bhandwalkar Aug 02 '16 at 13:52
1

Beat me to it :) I would also recommend using the $q service and resolve/reject each response. – zilj Aug 02 '16 at 13:56
but what is an advantage – Akash Bhandwalkar Aug 02 '16 at 13:58
Just a personal preference, I often like to split up functionality upon a returned value. Perhaps overkill in this scenario, true. – zilj Aug 02 '16 at 14:06
Thanks for this @AkashBhandwalkar, i did what you said in services and added this to controller AppStorage.getCalendarData().then(function(d){ $scope.test = d; },function(error){ }); but still $scope.test and d are null – Gaz Smith Aug 02 '16 at 14:10
are you sure on you are getting data from service – Akash Bhandwalkar Aug 02 '16 at 14:12
Yeah i have added a screenshot – Gaz Smith Aug 02 '16 at 14:16

Shintu Joseph · Answer 2 · 2016-08-02T14:30:52.140

As you put the api call as a method in the service, returning data from the service wont resolve yet, So in the controller the service return will only be a promise

serviceName.getCalendarData().then(function(data){

   //Success data
},function(){});

Service code must return like the below code and here you will get the entire response object,

return $http({method: 'GET', url:getAppointmentsurl});

One other way to get the data directly resolved stripping of the other properties is returning from service like this,

return $http({method: 'GET', url:getAppointmentsurl}).success(function(data){

    return data;
});

score 0 · Answer 3 · answered Aug 02 '16 at 14:26

To elaborate on Akash's correct answer, here's an example of how it should work.

In your view you should add logic to show the data only when hello exists. i.e. ng-if="hello"

controller:

ServiceName.getCalendarData().then(function(response) {
  $scope.hello = response;
});

service:

this.getCalendarData = function() {
  return $http.get('path/to/response/').success(function(data) {
    return data;
  });
}

Angular setting variable as object through http

3 Answers3