AngularJs http get response is undefined But the data is present inside success function

Question

Am new to angular. I have tried to get the json response from http get method.

My code is,

app.factory('getdata', function ($http, $q){
  this.getlist = function(){       
    alert('1');
    return $http.get('http://www.w3schools.com/angular/customers.php',{'Access-Control-Allow-Origin': 'localhost:*'})
    .then(function(response) {
      console.log('response'); console.log(response.data); //I get the correct items, all seems ok here
        alert('2');
        return response.data;
      });            
  }
  return this;
});
/* Stream page controller */
app.controller('streamCtrl', function($scope,getdata, $ionicSlideBoxDelegate, $timeout, $ionicScrollDelegate, $location, $sce){
  $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }
  getdata.getlist()
  .then(function(arrItems){
   $scope.sliders = arrItems;         
 });
alert($scope.sliders);

am getting the alert like 1, 'undefined' and 2 but the $scope.sliders has the data. because It was working once I resize the screen and also I can get correct alert inside the

getdata.getlist().then(function(arrItems) {
  $scope.sliders = arrItems;         
  alert($scope.sliders);
});

Sarjan Desai · Accepted Answer · 2015-10-29 11:29:26Z

6

The reason for getting alert is undefined is because you haven't define $scope.sliders in controller and http request is async so alert($scope.sliders); function call before getting data from response and setting that data to $scope.sliders.

You get alert($scope.sliders); value only after getting success response.

Other possibility is you can set $scope.sliders = {} and then use alert($scope.sliders); which show {} in alert when then function is called alert shows actual response.

Original plunker based on issue

Check comments and updated code in new plunker

edited Oct 29, 2015 at 11:29

answered Oct 29, 2015 at 5:35

Sarjan Desai

3,7332 gold badges21 silver badges32 bronze badges

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

11 Comments

Anandhakumar R Over a year ago

Still am getting the alert($scope.sliders) as undefined

Alex Man Over a year ago

@SarjanDesai Try not to update answer from others, atleast put some courtesy

Sarjan Desai Over a year ago

@Alex Man I'm trying complete my answer which was incomplete earlier

Anandhakumar R Over a year ago

Could you please try this now plnkr.co/edit/moOfwxFNM5ttH9wBzzvk?p=preview

Sarjan Desai Over a year ago

Check updated answer with new added plnkr and read comments in plnkr

|

Nidhish Krishnan · Accepted Answer · 2015-10-29 05:50:26Z

4

$http is a asynchronous call, so what happens is that you have triggered a http call at line number 6 while it gets the response the line number 10 will be executed since all http calls in angular are asynchronous.

That is why you are getting undefined

If you want to do anything after the response just do the stuff within the http promise ie. within the .then function block like as shown below

getdata.getlist()
  .then(function(response){ // http promise block
     $scope.sliders = response.data;
     console.log($scope.sliders);
});

answered Oct 29, 2015 at 5:50

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

3 Comments

Anandhakumar R Over a year ago

Could you please try here plnkr.co/edit/moOfwxFNM5ttH9wBzzvk?p=preview am still getting undefined

Nidhish Krishnan Over a year ago

@AnandhakumarR I have seen your plunker, just like .then, .success is another http promise, you have placed the alert outside the promise, that is why you are getting undefined

Nidhish Krishnan Over a year ago

@AnandhakumarR alert($scope.names) will get executed before the http call get finished, that's why it is recommended to put everything within the promise block ie. .success or .then function block

Collectives™ on Stack Overflow

AngularJs http get response is undefined But the data is present inside success function

2 Answers 2

11 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related