How to get a youtube playlist using javascript API and json

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 )

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

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