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
– Vanojx1, Commented Aug 2, 2016 at 13:50
Check this. $http is async and you should apply different methodology to get result of it. — Tuğca Eker
– Tuğca Eker, Commented Aug 2, 2016 at 13:52

Akash Bhandwalkar · Accepted Answer · 2016-08-02 13:51:08Z

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 2, 2016 at 13:51

Akash Bhandwalkar

8915 silver badges19 bronze badges

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

7 Comments

Akash Bhandwalkar Over a year ago

as http returns promise we have to resolve it in controller. as getCalendarData().then(function(){ here will be your data },function(error){ })

zilj Over a year ago

Beat me to it :) I would also recommend using the $q service and resolve/reject each response.

Akash Bhandwalkar Over a year ago

but what is an advantage

zilj Over a year ago

Just a personal preference, I often like to split up functionality upon a returned value. Perhaps overkill in this scenario, true.

Gaz Smith Over a year ago

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

|

zilj · Accepted Answer · 2016-08-02 14:26:31Z

0

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;
  });
}

answered Aug 2, 2016 at 14:26

zilj

6291 gold badge7 silver badges13 bronze badges

Comments

Shintu Joseph · Accepted Answer · 2016-08-02 14:30:52Z

0

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;
});

edited Aug 2, 2016 at 14:30

answered Aug 2, 2016 at 14:19

Shintu Joseph

9627 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular setting variable as object through http

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related