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

Question

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

// similar artist/bands
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) {
                    $.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.

I think this is a scope issues. Where is videos being defined? — thedaian
– thedaian, Commented May 25, 2011 at 15:33

Raynos · Accepted Answer · 2011-05-25 15:49:21Z

2

$.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);

answered May 25, 2011 at 15:49

Raynos

170k57 gold badges359 silver badges399 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cody.Stewart Over a year ago

Hey man, thanks a lot for your response, it did the trick... now I just need to go back and learn why and how the above works :)

Naftali · Accepted Answer · 2011-05-25 15:41:04Z

1

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.

edited May 25, 2011 at 15:41

answered May 25, 2011 at 15:33

Naftali

147k41 gold badges247 silver badges304 bronze badges

3 Comments

Cody.Stewart Over a year ago

That causes initPlaylist to be called every time a video is added to the videos array. It only needs to happen once, and thats when the array is done building. Oh, and the videos array is declared outside the function.

Naftali Over a year ago

@Cody.Stewart, you have a scope problem. what is the initPlaylist(); function?

Raynos Over a year ago

more elbow grease. Explain the whole ajax is asynchronous.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest