Get all YouTube Videos in a Playlist using Angular JS

Question

I want to get all of the YouTube videos in a specified playlist. The API currently allows you to pull 50 records at a time but you can pull the next set of records by passing a next page token.

I am still new to Angular and I am having trouble accomplishing this task.

Here is what I currently have:

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

What do I need to do to the getPlaylistVideos function to get it to return all of the videos in a playlist? Rather than just 50.

This is the code that I had before for just returning first page:

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

An example playlist id is PLFPg_IUxqnZNTAbUMEZ76_snWd-ED5en7.

Any help is much appreciated!

Modified Answer

$scope.getPlaylistVideos = function (selection) {
    // pass the nextPageToken attribute to the getPlaylistVideos method.
    youtubeService.getPlaylistVideos("PLFPg_IUxqnZNTAbUMEZ76_snWd-ED5en7", $scope.nextPageToken).then(function (response) {
        $scope.$apply(function () {
            angular.forEach(response.items, function (item) {
                $scope.playlistvideos.push(item);
            });

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

Answer 1

You need to use the pageToken attribute to fetch the next page.

From the documentation, Use the nextPageToken attribute from the api response.Call the API one or more times to retrieve all items in the list. As long as the API response returns a nextPageToken, there are still more items to retrieve.

In your controller, define a local variable nextPageToken to retrieve the next page and call the getPlaylistVideos with the nextPageToken attribute recursively until all the results are retrieved.

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

In your service, pass the pageToken attribute to the api to fetch the next page.

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