Why does my array appear empty when calling a function after the array is built in JS

// variables to be used throughout
var videos = new Array();

// similar artist/bands
function similarTo(who) {
    $.getJSON('http://ws.aud开发者_如何转开发ioscrobbler.com/2.0/?method=artist.getsimilar&artist='+who+'&limit=20&api_key=b25b959554ed76058ac220b7b2e0a026&format=json&callback=?', function(data) {
        $.each(data , function(i,similars) {
            $.each(similars.artist, function(c, artist) {
                $.getJSON('http://gdata.youtube.com/feeds/api/videos?q='+artist.name+'&orderby=relevance&start-index=1&max-results=1&v=2&alt=json-in-script&callback=?', function(data) {
                    $.each(data.feed.entry, function(i,video) {
                        videos.push({ 
                            id: video.id.$t.split(":")[3], 
                            title: video.title.$t 
                        });
                    });
                });
            });
            initPlaylist();
        });
    });
}

// start the playlist
function initPlaylist() {
    $('#ytplayerid').load('includes/ytplayer.php?track=' + videos[currenttrack].id);
    $('#player span').html(videos[currenttrack].title);
}

When my code reaches the initPlaylist() function the videos array appears to be empty, I have a feeling its actually being fired before the $.getJSON() call... is this possible? If I add a console.log(videos) after each push() the array is actually being built.

---

$.each(similars.artist, function(c, artist) {
    // doing ajax stuff here
    $.getJSON('url', function(data) {
        // this will get called later
        $.each(data.feed.entry, function(i,video) {
            videos.push({ 
                id: video.id.$t.split(":")[3], 
                title: video.title.$t 
            });
        });
    });
});
// trying to manipulate ajax data now :(
initPlaylist();

Your videos is empty because your trying to manipulate it before it's ready.

What you want to do is use jQuery 1.5+ deferred objects

var ajaxs = $.map(similars.artist, function(artist, c) {
    return $.getJSON('url', function(data) {
        $.each(data.feed.entry, function(i,video) {
            videos.push({ 
                id: video.id.$t.split(":")[3], 
                title: video.title.$t 
            });
        });
    });
});
// when all the ajaxs finish then call init play list
$.when.apply($, ajaxs).then(initPlaylist);

---

Move initPlaylist to a point where videos exists:

function similarTo(who) {
$.getJSON('http://ws.audioscrobbler.com/2.0/?method=artist.getsimilar&artist='+who+'&limit=20&api_key=b25b959554ed76058ac220b7b2e0a026&format=json&callback=?', function(data) {
    $.each(data , function(i,similars) {
        $.each(similars.artist, function(c, artist) {
            $.getJSON('http://gdata.youtube.com/feeds/api/videos?q='+artist.name+'&orderby=relevance&start-index=1&max-results=1&v=2&alt=json-in-script&callback=?', function(data) {
                var videoes = [];  //create array
                $.each(data.feed.entry, function(i,video) {
                    videos.push({ 
                        id: video.id.$t.split(":")[3], 
                        title: video.title.$t 
                    });
                });
                initPlaylist(); 
            //videos exists, but i think you might need to pass it as a parameter
            });
        });
    });

});
}

Although, knowing what is in initPlaylist(); might help. And it might solve what appears to be a scope problem in your code.

ALSO: Ajax is asynchronous, there forit might not finish by the time the code gets to initPlaylist();, so you need some type of callback to call initPlaylist(); when all the ajax calls are done.