How to get a youtube playlist using javascript API and json

Question

This is part of my youtube project. I try to extract video information from JSON format but I have problem in this line:

var videoId = data.feed.entry[i].li         


        

Answer 1

Simplified the solution and got rid of the string manipulation stuff.

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/B2A4E1367126848D?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';

var vids = new Array();

$.getJSON(playListURL, function(data) {
    $.each(data.feed.entry, function(i, item) {
        vids.push( item["media$group"]["yt$videoid"]["$t"] );
    });

    console.log( vids );
});

Answer 2

IMHO, you code can be much shortened if you use $.getJSON, $.each
Try this.

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/B2A4E1367126848D?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
    var list_data="";
    $.each(data.feed.entry, function(i, item) {
        var feedTitle = item.title.$t;
        var feedURL = item.link[1].href;
        var fragments = feedURL.split("/");
        var videoID = fragments[fragments.length - 2];
        var url = videoURL + videoID;
        var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
        if (videoID !='videos') {
list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"</a></li>';
}
    });
    $(list_data).appendTo(".cont");
});

Demo: Fiddle for the playlist you have provided

P.S: Keep in mind that thumbnail for a youtube video could be found at

http://img.youtube.com/vi/{video-id}/default.jpg 

( More Info here )

Answer 3

I found that these lines:

var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];

are expecting item.link[1].href to be in this format:

http://gdata.youtube.com/feeds/api/videos/NAs5it-xjnQ/responses?v=2

However, it does not necessarily work as sometimes item.link[1] gives an URL like

http://www.youtube.com/watch?v=Vcp7xz6dfWE&feature=youtube_gdata

Fragments[fragments.length - 2] will end up being "www.youtube.com" instead of the video ID.

I modified it to retrieve the link from item.content.src which always has a fixed format in the URL e.g.

http://www.youtube.com/v/NAs5it-xjnQ?version=3&f=playlists&app=youtube_gdata

So the final code snippet is something like:

var tmp = item.content.src.split("/").reverse()[0];
var videoID = tmp.substring(0, tmp.indexOf("?"));

which so far has not failed me yet.

Hope this helps those who are stuck or is having problems retrieving the video ID.

Regards
CK