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?

Answer 1

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

Answer 2

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