Javascript / jQuery function return value empty

Question

Possible Duplicate:
jQuery AJAX: return value on success

I am trying to load a song list from the YouTube data API and have been successful until I broke it out into it's own function.

The problem is with my local variable's value vaporizing when I return it back to the calling function. Basically, when I try to use it, it is an empty array when it has values in it. Does anybody know what might be happening?

function LoadSongList(feed){
    songList = new Array();
    $.getJSON(feed, function(data){

        if (data['feed']) {
            $.each(data['feed']['entry'], function(i, entry){
                songList.push({
                    videoID: entry.media$group.yt$videoid.$t,
                    title: entry.title.$t,
                    tumbnailUrl: entry.media$group.media$thumbnail[0].url,
                    author: entry.author[0].name.$t
                });

            });
        }

    });
    return songList;
}

Can I have another hint? I'm not sure what you mean by "A in AJAX?" In general, I just want to build an array of structures of the title, video ID, and the author name and return it back to the calling function. — user1709730, Sep 30 '12 at 12:23
The "a" in "Ajax" stands for "Asynchronous". The `$.getJSON()` function returns immediately, before the Ajax result is received, and then your `return songList` executes quite correctly returning an empty array since it _is_ still empty at that point. Then, asynchronously but definitely after the current JS completes, the callback you provided to `$.getJSON()` will be executed and run your `$.each()` loop. — nnnnnn, Sep 30 '12 at 12:24

score 4 · Answer 1 · answered Sep 30 '12 at 12:22

4

You should provide a callback method . $.getJSON is asynchronous method and you are trying to return songList before success method get called.

function LoadSongList(feed, callback){
    songList = new Array();
    $.getJSON(feed, function(data){

        if (data['feed']) {
            $.each(data['feed']['entry'], function(i, entry){
                songList.push({
                    videoID: entry.media$group.yt$videoid.$t,
                    title: entry.title.$t,
                    tumbnailUrl: entry.media$group.media$thumbnail[0].url,
                    author: entry.author[0].name.$t
                });

            });
          callback(songList);
        }
    });
}

Call as:

LoadSongList(feed, function(songList){
  // your code 

});

answered Sep 30 '12 at 12:22

Anoop

23,044
10
62
76

I have done little javascript programming and started looking into jQuery programming. I am not sure I understand what a "callback" is. Can you direct me to the right place to understand a "callbacks? Thanks! – user1709730 Sep 30 '12 at 12:30
Move your code( after the return of LoadSongList) inside a function. and send this function reference as second arguments in LoadSongList. following links may help you http://stackoverflow.com/questions/483073/getting-a-better-understanding-of-callback-functions-in-javascript and http://www.impressivewebs.com/callback-functions-javascript/ – Anoop Sep 30 '12 at 12:35
second argument you pass in $.getJSON is example of callback. – Anoop Sep 30 '12 at 12:41

Javascript / jQuery function return value empty

1 Answers1