YouTube API failing on IE

Question

I've been playing around with YouTube API to display playlist on a side bar as explained in the thread. I have given the full code as well in the codepen link.

However, IE failing to display the playlist. the below is the console error.

This the line it triggers the error

function getPlaylistItems(pageToken) {
        return gapi.client.youtube.playlistItems.list({
            "part": "snippet,contentDetails",
            "maxResults": 50,
            "playlistId": PLAYLIST_ID, 
            pageToken //Error is in this line
        }).then(function(response) {
        const {items, nextPageToken} = response.result;


        playlistItems.push(...items);

        var index = 0;
        items.forEach(function(item) {
            const thumbnailItem = createPlaylistItem(item, index);
            playlist.appendChild(thumbnailItem);
            index++;
        });
        maxVideoVisible = index - 3;

        if (nextPageToken) {
            getPlaylistItems(nextPageToken);
        }
    }, function(err) {
        console.error("Execute error", err);
    });
}

Can someone help me to understand this issue?

Thanks

Answer 1

I fount the issue. The problem is that the Internet Explorer does not support Destructuring assignment. I found the solution from this thread

So instead of below line,

const {items, nextPageToken} = response.result;

we should rewrite the section as below,

const hash = response.result;
items = hash.items,
nextPageToken = hash.nextPageToken;

and also the below line,

pageToken

should be written as,

"pageToken" : pageToken

The below is the final fixed code. Whoever facing the same issues can use the below code.

    function getPlaylistItems(pageToken) {
        return gapi.client.youtube.playlistItems.list({
            "part": "snippet,contentDetails",
            "maxResults": 50, // This is the maximum available value, according to the Google docs
            "playlistId": PLAYLIST_ID, 
            "pageToken" : pageToken
        }).then(function(response) {

            //Fixed code
            const hash = response.result;
            items = hash.items,
            nextPageToken = hash.nextPageToken;

            // The items[] is an array of a playlist items.
            // nextPageToken - if empty - there are no items left to fetch
            playlistItems.push(items);

            // It's up to you, how to handle the item from playlist. 
            // Add 'onclick' events to navigate to another video, or use another thumbnail image quality 
            var index = 0;
            items.forEach(function(item) {
                const thumbnailItem = createPlaylistItem(item, index);
                playlist.appendChild(thumbnailItem);
                index++;
            });
            maxVideoVisible = index - 3;

            // Recursively get another portion of items, if there any left
            if (nextPageToken) {
                getPlaylistItems(nextPageToken);
            }
        }, function(err) {
            console.error("Execute error", err);
    });
}

Answer 2

You could check the YouTube PlaylistItems: list document, the pageToken is a string type, so, the code as below:

    return gapi.client.youtube.playlistItems.list({
        "part": "snippet,contentDetails",
        "maxResults": 50,
        "playlistId": PLAYLIST_ID, 
        "pageToken" : "<the page token string>" //Error is in this line
    }).then(function(response) {

Answer 3

You should be doing something like this.

gapi.client.youtube.playlistItems.list({
            "part": "snippet,contentDetails",
            "maxResults": 50,
            "playlistId": PLAYLIST_ID, 
            pageToken : NextPageToken 
        }).then(function (response) {
              // if response.result.nextPageToken exists, use it
              if (response.result.nextPageToken) {
                 NextPageToken = response.result.nextPageToken;                        
              } else {
                 NextPageToken = false;
              }
           });