CODEWITHSUNDEEP
javascriptapiyoutube
user1941537
user1941537

Reputation: 6675

Youtube API with JavaScript - Show all videos from a playlist

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?

Upvotes: 1

Views: 2905

Answers (3)

Hakan Kose
Hakan Kose

Reputation: 1656

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

Upvotes: 6

Mihir
Mihir

Reputation: 155

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.

Upvotes: 1

r.delic
r.delic

Reputation: 863

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

Upvotes: 1

Related Questions