在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分页

回答

相关问题