jQuery YouTube Array from Playlist Scope Issue

Question

I'm trying to pull a list of YouTube videos based on a playlist ID, which is then passed to a YouTube carousel script. I'm having some issues with scope though that I'm not sure how to resolve it.

Basically, I declare the array yt_videos, then populated it with the IDs of the individual videos in the $.each loop. When I try to access this array in the outer function, it's undefined. I'm sure the solution is fairly simple, just can't get there on my own.

Here's the Fiddle: http://jsfiddle.net/wardrobe/Nz87f/2/

Here's the JS:

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

$.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];
        yt_videos.push(videoID);
    });
});


/*Video height and width*/
var yt_height = 346;
var yt_width = 615;

/*-----DO NOT EDIT BELOW THIS-----*/
jQuery(document).ready(function () {
    var yt_html = "";

    for (var num=0, len=yt_videos.length; num<len; ++num){
        yt_html = yt_html + "<li><a onclick='change_embeded(\"" + yt_videos[num] + "\")'><img src='http://img.youtube.com/vi/"+yt_videos[num]+"/2.jpg' class='myimage' style='max-height:75px;' /></a></li>";
    }

    jQuery('#yt_container').html('<div id="yt_videosurround"><div id="yt_embededvideo"><object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object></div></div><ul id="mycarousel" class="jcarousel-skin-tango">'+yt_html+'</ul>');
    var embeded_cssObj = {
        'width' : yt_width,
        'height' : yt_height
    } 
    jQuery('#yt_embededvideo').css(embeded_cssObj);
    jQuery('#yt_videosurround').css(embeded_cssObj);
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular'
    });
});


function change_embeded(video_id){
    jQuery('#yt_embededvideo').html('<object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>');
}

Answer 1

Accessing data that might not have yet arrived from the server.

Some reorganising - try this - http://jsfiddle.net/QQ34V/

jQuery(document).ready(function () {

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/PLDD79FC8870945AA5?v=2&alt=json&callback=?',
videoURL= 'http://www.youtube.com/watch?v=',
yt_videos = [],
yt_height = 346,
yt_width = 615,
yt_html = "";

    $.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];
            yt_videos.push(videoID);
        });

        for (var num=0, len=yt_videos.length; num<len; ++num){
            yt_html = yt_html + "<li><a onclick='change_embeded(\"" + yt_videos[num] + "\")'><img src='http://img.youtube.com/vi/"+yt_videos[num]+"/2.jpg' class='myimage' style='max-height:75px;' /></a></li>";
        }

        jQuery('#yt_container').html('<div id="yt_videosurround"><div id="yt_embededvideo"><object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object></div></div><ul id="mycarousel" class="jcarousel-skin-tango">'+yt_html+'</ul>');
        var embeded_cssObj = {
            'width' : yt_width,
            'height' : yt_height
        } 
        jQuery('#yt_embededvideo').css(embeded_cssObj);
        jQuery('#yt_videosurround').css(embeded_cssObj);
        jQuery('#mycarousel').jcarousel({
            wrap: 'circular'
        });

        /* for correct placement of this function you will need to provide more info on where/ how it is called */
        function change_embeded(video_id){
            jQuery('#yt_embededvideo').html('<object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>');
        }

    });

});

*I have not fully checked this code, but note here that the access to your variables are now within the .ajax() callback function, making sure that they available when you 'get' the data back.