在AngularJS中處理JSON分頁

我在學習Javascript和AngularJS。在這種情況下，我正在編寫一個利用Spotify Web API讀取和修改播放列表的應用程序。我已經創建了一個函數，根據它的ID獲取播放列表中的曲目，除了一件事情之外，這個工作正常。如Spotify Web API文檔中所述，請求限制爲100個軌道。當然，有一個URL可以檢索播放列表中的下一個100首曲目，但我還沒有想出如何正確處理這個問題。以下是我嘗試檢索播放列表中的所有曲目，但這隻會掛斷瀏覽器。在AngularJS中處理JSON分頁

$scope.getPlaylistTracks = function (playlist_id) { 

    return $q(function (resolve, reject) { 
     Spotify.getPlaylistTracks($scope.currentUser["id"], playlist_id).then(function(data) { 
      console.log(data); 

      var tracks = data.items; 
      var next = data.next; 

      while(next != null) { 
       console.log("More than one page"); 
       console.log(data.next); 
       $http.get(data.next, { 
        headers: {'Authorization': "Bearer " + $scope.token} 
       }).then(function(response) { 
        console.log(response.status); 
        console.log(response.data); 
        next = data.next; 
        tracks.push.apply(tracks, response.data.items); 
       }, function(response) { 
        console.log(response.data || "Request failed"); 
        console.log(response.status); 
       }) 
      } 

      resolve(tracks); 

     }, function(reason) { 
      reject(reason); 
     }) 
    }); 
}

如果我不喜歡這樣，而不是，我能夠檢索最多200個音軌：

var tracks = data.items; 

if(data.next != null) { 
    console.log("More than one page"); 
    console.log(data.next); 
    $http.get(data.next, { 
     headers: {'Authorization': "Bearer " + $scope.token} 
    }).then(function(response) { 
     console.log(response.status); 
     console.log(response.data); 
     tracks.push.apply(tracks, response.data.items); 
    }, function(response) { 
     console.log(response.data || "Request failed"); 
     console.log(response.status); 
    }) 
} 

resolve(tracks);

來源

2015-08-25 Stian Sandve

while while循環肯定沒有做你希望的。將被解僱可能數以千計的請求。它不會等待每個迭代的請求。看看你的網絡標籤 – charlietfl

爲什麼你一次需要超過100個？這對用戶來說很重要，可以在用戶需要時提出更多請求 – charlietfl

用戶不會查看應用程序的軌跡。我的意圖是檢測（並在以後刪除）播放列表中的重複曲目，所以我想我需要取出所有這些曲目。 –

我得到它的工作就像使用下面的代碼預期。

 $scope.fetchTracksFromPlaylist = function (playlist_id) { 
      $scope.fetchPlaylistTracks(playlist_id).then(function(data) { 
       $scope.setPlaylistTracks(data); 
      }) 
     } 

     $scope.fetchPlaylistTracks = function (playlist_id) { 
      $scope.tracks = []; 

      return $q(function (resolve, reject) { 
       Spotify.getPlaylistTracks($scope.currentUser["id"], playlist_id).then(
        function (data) { 
         resolve(data); 
        }, function (reason) { 
         reject(reason); 
        }) 
      }); 
     } 

     $scope.setPlaylistTracks = function (tracks) { 

      $scope.tracks.push.apply($scope.tracks, tracks.items); 

      if (tracks.next) { 
       $scope.callSpotify(tracks.next, function(data) { 
        $scope.setPlaylistTracks(data); 
       }); 
      } 
     } 

     $scope.callSpotify = function (url, callback) { 
      $http.get(url, { 
       headers: {'Authorization': "Bearer " + $scope.token} 
      }).then(function (response) { 
       callback(response.data); 
      }, function (response) { 
       console.log(response.data || "Request failed"); 
       console.log(response.status); 
      }) 
     }

來源

2015-08-26 12:41:00

在AngularJS中處理JSON分頁

回答

相關問題