Angular JS: Accessing a $scope.variable defined inside a $http.get block to use in another $http.get

Question

Right now, I am using $http.get on an online json data source. In my controller:

$http.get('source').success(function(data) {
  $scope.nextPageToken = data.nextPageToken;
  $scope.prevPageToken = data.prevPageToken;
});

Getting the variable $scope.nextPageToken works fine. My HTML code for displaying it (for testing)

<p>{{nextPageToken}}</p>

works and it displays correctly in the browser. But when I try to put use the variable $scope.nextPageToken in the controller

$http.get('source').success(function(data) {
  $scope.nextPageToken = data.nextPageToken;
  $scope.prevPageToken = data.prevPageToken;
});
$http.get('source&pageToken=' + $scope.nextPageToken).success(function(data) {
  $scope.picture = data.thumbnail.url;
});

The console in the console returns a bad request (400). It seems to be trying to reach the link 'source&pageToken=undefined', which means that $scope.nextPageToken doesn't get evaluated or doesn't get passed to the $http.get parameter.

This is strange because URL is correct when I define a string variable and concatenate it to the URL of the $http.get parameter. For example, it works when I try

this.key = 'someKey';
$http.get('source&key=' + this.key).success(function(data) {
  $scope.nextPageToken = data.nextPageToken;
  $scope.prevPageToken = data.prevPageToken;
});

Could this be because I am trying to access a variable that is only accessible inside the $http.get function block? If so, how do I access the $scope.nextPageToken variable outside the block?

Any help is appreciated. Thanks!

edit (after basilikum's answer): I have also tried

this.someKey = 'stringKey';
$http.get('source&key=' + this.someKey).success(function(data) {
    $scope.nextPageToken = data.nextPageToken;
    $scope.prevPageToken = data.prevPageToken;
    $http.get('source&pageToken=' + $scope.nextPageToken + '&key' + this.someKey).success(function(data) {
        $scope.picture = data.thumbnail.url;
    });
});

(this is a more specific example of the actual code I have) When I do this though, the error that I get is

TypeError: Cannot read property 'someKey' of undefined

I had already tried the nested $http.get inside another one, but I get another error completely, so I thought it was just creating more problems. Could anyone tell me what is going on here?

It's because the this you use outside of the function and the this you use inside of the function are not the same. Please read this (pun not intended) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Mike Quinlan
– Mike Quinlan, Commented May 1, 2014 at 23:49

basilikum · Accepted Answer · 2014-05-01 21:35:25Z

4

You are dealing with asynchronous code. By the time you are sending the second request, the first one isn't complete yet, so nextPageToken and prevPageToken aren't set yet. A simple solution would be to put the second request inside the success function of the first one:

$http.get('source').success(function(data) {
    $scope.nextPageToken = data.nextPageToken;
    $scope.prevPageToken = data.prevPageToken;
    $http.get('source&pageToken=' + $scope.nextPageToken).success(function(data) {
        $scope.picture = data.thumbnail.url;
    });
});

answered May 1, 2014 at 21:35

basilikum

10.5k5 gold badges49 silver badges58 bronze badges

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

2 Comments

user2669464 Over a year ago

Thanks for your help. I think I am getting closer, but I now get another error. Please see the edited question.

basilikum Over a year ago

Read the answer(s) to this question: stackoverflow.com/questions/3127429/javascript-this-keyword You will see, that this means different things depending on the context. this inside the success function is different from this outside of the function. You can just define a variable that holds your data (var someKey = 'stringKey';) or use a variable to save the state of this (var that = this; that.someKey = 'stringKey';).

Mike Quinlan · Accepted Answer · 2014-05-01 23:10:10Z

0

@basilikum is right, but you could chain your functions like this:

$http.get('source')
  .then(function(data) {
    $scope.nextPageToken = data.nextPageToken;
    $scope.prevPageToken = data.prevPageToken;
    return $http.get('source&.pageToken=' + $scope.nextPageToken)
  }).then(function(data) {
    $scope.picture = data.thumbnail.url;
  });

Angular allows for the chaining of promises so that you can get rid of all that ugly nesting. All you have to do is return a promise out of each then call.

answered May 1, 2014 at 23:10

Mike Quinlan

2,88219 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular JS: Accessing a $scope.variable defined inside a $http.get block to use in another $http.get

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related