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) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this — Mike Quinlan, May 01 '14 at 23:49

score 4 · Accepted Answer · answered May 01 '14 at 21:35

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 01 '14 at 21:35

basilikum

10,378
5
45
58

Thanks for your help. I think I am getting closer, but I now get another error. Please see the edited question. – user2669464 May 01 '14 at 21:47
Read the answer(s) to this question: http://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';`). – basilikum May 01 '14 at 21:54

score 0 · Answer 2 · answered May 01 '14 at 23:10

@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.

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

2 Answers2