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?

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
– Klutch, Commented Apr 3, 2015 at 20:03

Guffa · Accepted Answer · 2015-04-04 21:50:21Z

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');
    }
}

Collectives™ on Stack Overflow

Return values from an Ajax function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related