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.

IE 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

Which version of IE do you use ... Because i'm not a professional but Object destructuration is not supported (i think) as well as Promises... But maybe i am wrong I just try to help — Simon Trichereau, Oct 10 '19 at 08:36
This error triggers only on IE 11. works on every other browser including Microsoft Edge — Dreg Artor, Oct 10 '19 at 08:49
@ThumChoonTat it doesn't need to have value. I added the full function to the question — Dreg Artor, Oct 10 '19 at 08:54
you need to apply your nextPageToken to pageToken: nextPageToken — Linda Lawton - DaImTo, Oct 10 '19 at 08:54

score 1 · Answer 1 · answered Oct 10 '19 at 08:56

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

score 1 · Answer 2 · answered Oct 10 '19 at 10:38

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) {

Dreg Artor · Accepted Answer · 2019-10-11T09:43:41.723

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

YouTube API failing on IE

3 Answers3