Return values from an Ajax function

Question

I am trying to create a block of text that will update itself when the text changes from a Json string.

Basically I started with:

function streamSong(index) {
        if (!isUndefined(myPlaylist[index].title))
            return myPlaylist[index].title;
        else return '';
    }

then modified it to look like this:

function streamSong(index) {
        var currentSongName = 'here';
        if (!isUndefined(myPlaylist[index].title)) {
                        var intervalFunc = function(){
                            var jsonData = null;
                            $.ajax({
                            url: 'http://www.thesite.com/pullJson.php?stream=rapstation',
                            dataType: "json",
                            data: { get_param: 'employees' },
                            success: function (data) { 
                              currentSongName = 'now here';
                            },
                            error: function (data) { 
                              currentSongName = 'not working';
                            }
                          });
                        };
                        setInterval (intervalFunc, 60000);
                        setTimeout (intervalFunc, 1);
                        return currentSongName;
        }
        else return 'no title';
    }

The first function fired off fine and returned my Stream Title. The second function fires off, but I never am able to modify the value of currentSongName.

I am still a bit new to Javascript and ajax so excuse my ignorance, but I obviously want to ultimately set the value of currentSongName to the Json value I retrieve, but for now I would just like it to be able to change values on a timer.

Am I going about this all wrong?

Check [this](http://stackoverflow.com/questions/27509/detecting-an-undefined-object-property) out on how to check for `undefined` variable. — D4V1D, Apr 03 '15 at 19:58
I am a bit lost as to what you are trying to tell me. I know that my varriable has a value in it, as I set the value at the top of the function: var currentSongName = 'here'; then at the bottom, (outside of the ajax call) I am returning currentSongName. What I get back and is displayed on my page is 'here'. But As you can see I am trying to change the value of it depending on if the ajax call is successful or if there is an error. — Klutch, Apr 03 '15 at 20:03
Duplicate of http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call — Drew Gaynor, Apr 03 '15 at 20:08

Guffa · Accepted Answer · 2015-04-04T21:50:21.387

The variable is modified just fine, but too late. The AJAX call is asynchronous, so the variable is used to return the value before the value is assigned to it.

You would use a callback to handle the result. With the original code it would look like this:

function streamSong(index, callback) {
    if (!isUndefined(myPlaylist[index].title)) {
        callback(myPlaylist[index].title);
    } else {
        callback('');
    }
}

Usage:

streamSong(42, function(title) {
  // do what you want with the title
});

For the AJAX call the callback would be used like this:

function streamSong(index, callback) {
    var currentSongName = 'here';
    if (!isUndefined(myPlaylist[index].title)) {
        var intervalFunc = function(){
            var jsonData = null;
            $.ajax({
                url: 'http://www.thesite.com/pullJson.php?stream=rapstation',
                dataType: "json",
                data: { get_param: 'employees' },
                success: function (data) { 
                    callback('now here');
                },
                error: function (data) { 
                    callback('not working');
                }
            });
        };
        setInterval (intervalFunc, 60000);
        setTimeout (intervalFunc, 1);
    } else {
        callback('no title');
    }
}

Return values from an Ajax function

1 Answers1