Youtube API with JavaScript - Show all videos from a playlist

Question

I'm trying to get all 137 videos from a Youtube playlist with the following code:

function loadVideos() {

  let pagetoken = '';
  let resultCount = 0;
  const mykey = "***********************************";
  const playListID = "PLzMXToX8Kzqggrhr-v0aWQA2g8pzWLBrR";

  const URL =  `https://www.googleapis.com/youtube/v3/playlistItems?
part=snippet
&maxResults=50
&playlistId=${playListID}
&key=${mykey}`;


  fetch(URL)
    .then(response => {
      return response.json();
    })
    .then(function(response) {

      resultCount = response.pageInfo.totalResults;
      console.log("ResultCount: " + resultCount);

      pagetoken = response.nextPageToken;
      console.log("PageToken: " + pagetoken);

      resultCount = resultCount - 50;
      console.log("ResultCount: " + resultCount);

      while (resultCount > 0) {

        const URL = `https://www.googleapis.com/youtube/v3/playlistItems?
part=snippet
&maxResults=50
&playlistId=${playListID}
&key=${mykey}
&pageToken=${pagetoken}`;

        fetch(URL)
          .then(response => {
            return response.json();
          })
          .then(function(response) {
            pagetoken = response.nextPageToken ? response.nextPageToken : null;
            console.log("PageToken: " + pagetoken);
          });
        resultCount = resultCount - 50;
      }
    })
    .catch(function(error) {
      console.log("Looks like there was a problem: \n", error);
    });
} // End of loadVideos function

// Invoking the loadVideos function
loadVideos();

The first 50 videos get loaded The second 50 videos get loaded too But instead of loading the remaining 37 videos from the list, my script loads the previous 50 videos again.

It seems that the pagetoken doesn't get updated for the third request.

What is wrong with my code?

I'm still struggling to find a solution for this. Any help would be appreciated. — user1941537, Oct 27 '18 at 10:13

score 6 · Accepted Answer · edited Oct 27 '18 at 11:46

You don't need to make a Math with 50 - maxResults, just lookup for nextPageToken and make the code recall the api if there is a new token.

For Example

function getUrl(pagetoken) {
  var pt = (typeof pagetoken === "undefined") ? "" :`&pageToken=${pagetoken}`,
      mykey = "************",
      playListID = "PLzMXToX8Kzqggrhr-v0aWQA2g8pzWLBrR",
      URL = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=${playListID}&key=${mykey}${pt}`;
  return URL;
}


function apiCall(npt) {
  fetch(getUrl(npt))
  .then(response => {
      return response.json();
  })
  .then(function(response) {
      if(response.error){
        console.log(response.error)
      } else {
        responseHandler(response)
      }

  });
}

function responseHandler(response){
  if(response.nextPageToken)
    apiCall(response.nextPageToken);

  console.log(response)
}
apiCall();

If you see the api makes 3 calls because after the third there is no nextPageToken

WOW! I always knew that there must be a better way to do it. Your code example is really GREAT and is exactly what I was looking for. Thanks a lot. — user1941537, Oct 27 '18 at 11:41

r.delic · Answer 2 · 2018-10-27T11:14:46.443

1

You're looping through asynchronous functions without waiting for a response. Try adding async in front of your function declaration and await in front of your fetch...

function loadVideos() {
// ...

    .then(async function(response) {
    // ...

        while (resultCount > 0) {
        // ...

            await fetch(URL)
                .then(response => {
                // ...

Or if your setup doesn't support async/await, use bluebird's Promise.mapSeries with an empty array of length = resultCount, something like this

edited Oct 27 '18 at 11:14

answered Oct 27 '18 at 10:37

r.delic

795
7
18

If I use async await I get this error: await is a reserved word. – user1941537 Oct 27 '18 at 11:03
1

@user1941537 Oh right, you need the async in front of the second function declaration. I edited the answer, this should work if your environment supports async/await. – r.delic Oct 27 '18 at 11:12

score 1 · Answer 3 · answered Oct 27 '18 at 11:23

1

kindly i sugest you to remove your API KEY from the code and simply put the other signs or let it be blank for understandings for others.

answered Oct 27 '18 at 11:23

Mihir

145
11

Youtube API with JavaScript - Show all videos from a playlist

3 Answers3