Javascript 使用Angular JS获取播放列表中的所有YouTube视频

我想获取指定播放列表中的所有YouTube视频。API目前允许您一次提取50条记录，但您可以通过传递下一页标记来提取下一组记录

我对Angular还是个新手，在完成这项任务时遇到了困难

以下是我目前拥有的：

var app = angular.module('ph', []);
        var key = '';

        app.factory('youtubeService', ['$http', function ($http) {

            function getPlaylists(channelId) {
                return $.get("https://www.googleapis.com/youtube/v3/playlists", { part: 'snippet', channelId: channelId, key: key, maxResults: 50 });
            }

            function getPlaylistVideos(playlistId) {

                var items = [];
                var nextPageToken = "";

                $.get('https://www.googleapis.com/youtube/v3/playlistItems', { part: 'snippet', maxResults: 50, playlistId: playlistId, key: key }).then(function (firstResponse) {

                    items = firstResponse.items;
                    var numberOfPages = Math.ceil(firstResponse.pageInfo.totalResults / 50);

                    for (var page = 1; page <= numberOfPages; page++) {
                        $.get('https://www.googleapis.com/youtube/v3/playlistItems', { part: 'snippet', maxResults: 50, pageToken: nextPageToken, playlistId: playlistId, key: key }).then(function(response) {
                            items = items.concat(response.items);
                            nextPageToken = response.nextPageToken;
                        });
                    }
                });

                return items;
            }

            function getVideos(keyword) {
                return $.get('https://www.googleapis.com/youtube/v3/search', { part: 'snippet', q: keyword, key: key, type: 'video' });
            }

            return { getPlaylists: getPlaylists, getPlaylistVideos: getPlaylistVideos, getVideos: getVideos }

        }]);


        app.controller('ctrl', ['$http', '$scope', 'youtubeService', function ($http, $scope, youtubeService) {

            youtubeService.getPlaylists('UC-9-kyTW8ZkZNDHQJ6FgpwQ').then(function (response) {
                $scope.$apply(function () {
                    $scope.playlists = response.items;
                });
            });

            $scope.getPlaylistVideos = function (selection) {
                youtubeService.getPlaylistVideos(selection.id).then(function (response) {
                    $scope.$apply(function () {
                        $scope.playlistvideos = response.items;
                    });
                });
            }

            $scope.getVideos = function (selection) {
                youtubeService.getVideos(selection).then(function (response) {
                    $scope.$apply(function () {
                        $scope.videos = response.items;
                    });
                });
            }
        }]);

示例播放列表id是PLFPg_IUxqnZNTAbUMEZ76_snWd-ED5en7

非常感谢您的帮助

修正答案

---

您需要使用

pageToken

属性来获取下一页

根据文件， 从api响应中使用nextPageToken属性。调用api一次或多次以检索api中的所有项 列表只要API响应返回nextPageToken， 还有更多项目要检索。

在控制器中，定义一个局部变量

nextPageToken

以检索下一页，并使用

nextPageToken

属性递归调用

getplaylives

，直到检索到所有结果

app.controller('ctrl', ['$http', '$scope', 'youtubeService', function ($http, $scope, youtubeService) {

        // define a local variable pageToken, it is gonna be undefined for the first time and will be initialized with next page token after subsequent responses
        $scope.nextPageToken;
        $scope.playlistVideos = [];

        youtubeService.getPlaylists('UC-9-kyTW8ZkZNDHQJ6FgpwQ').then(function (response) {
            $scope.$apply(function () {
                $scope.playlists = response.items;
            });
        });

        $scope.getPlaylistVideos = function (selection) {
            // pass the nextPageToken attribute to the getPlaylistVideos method.
            youtubeService.getPlaylistVideos(selection.id, $scope.nextPageToken).then(function (response) {
                $scope.$apply(function () {
                    $scope.playlistVideos.push(response.items);

                    if(typeof response.nextPageToken != 'undefined'){
                          $scope.nextPageToken = response.nextPageToken;
                          // call the get playlist function again
                          $scope.getPlaylistVideos(selection);
                    } 
                });
            });
        }

        $scope.getVideos = function (selection) {
            youtubeService.getVideos(selection).then(function (response) {
                $scope.$apply(function () {
                    $scope.videos = response.items;
                });
            });
        }
}]);

在您的服务中，将

pageToken

属性传递给api以获取下一页

function getPlaylistVideos(playlistId, pageToken) {
...
     // pass the page token as a parameter to the API
     $.get('https://www.googleapis.com/youtube/v3/playlistItems', { part: 'snippet', maxResults: 50, playlistId: playlistId, key: key, pageToken: pageToken })
...
}

---

可能是@Sandepsukhija的复制品我看到了这个问题，但我正在寻找关于它的角度部分的帮助。我已经知道分页，我的代码正在尝试使用它。我只是不知道如何修改我的功能，以便我可以让它工作使用Angular@Aaron我知道这是一个很老的问题，但是你有更好的例子吗？或者是一个正在运行的示例？我已经尝试添加了您的代码，但似乎仍然不起作用。在GetPlaylist视频中，它不应该返回一些东西吗？此外，递归调用是否应该在参数中包含nextpage标记。这对你有用吗？我已经更新了答案。函数

GetPlayVideos

不返回任何内容，它使用获取的播放列表项更新

$scope.playVideos

变量。此外，函数

getplayliveloods

使用范围变量

nextpGetOken

获取下一页。因此必须将返回添加到getplayliveloods，并将项目推到数组中，而不是将实际数组推到playliveloods中。我已在问题中添加了我的更改。非常感谢你的帮助。

app.controller('ctrl', ['$http', '$scope', 'youtubeService', function ($http, $scope, youtubeService) {

        // define a local variable pageToken, it is gonna be undefined for the first time and will be initialized with next page token after subsequent responses
        $scope.nextPageToken;
        $scope.playlistVideos = [];

        youtubeService.getPlaylists('UC-9-kyTW8ZkZNDHQJ6FgpwQ').then(function (response) {
            $scope.$apply(function () {
                $scope.playlists = response.items;
            });
        });

        $scope.getPlaylistVideos = function (selection) {
            // pass the nextPageToken attribute to the getPlaylistVideos method.
            youtubeService.getPlaylistVideos(selection.id, $scope.nextPageToken).then(function (response) {
                $scope.$apply(function () {
                    $scope.playlistVideos.push(response.items);

                    if(typeof response.nextPageToken != 'undefined'){
                          $scope.nextPageToken = response.nextPageToken;
                          // call the get playlist function again
                          $scope.getPlaylistVideos(selection);
                    } 
                });
            });
        }

        $scope.getVideos = function (selection) {
            youtubeService.getVideos(selection).then(function (response) {
                $scope.$apply(function () {
                    $scope.videos = response.items;
                });
            });
        }
}]);

function getPlaylistVideos(playlistId, pageToken) {
...
     // pass the page token as a parameter to the API
     $.get('https://www.googleapis.com/youtube/v3/playlistItems', { part: 'snippet', maxResults: 50, playlistId: playlistId, key: key, pageToken: pageToken })
...
}