jquery cannot set a variable

Question

I have a code where after getting information from the database it should set the variable newcolorid to the id which it get from the database. As you can see, i defined the variable before the function, but after setting the new id, it still remains the same. Basically in the console i see the new id, but after the function is done, it reverts it back to 0. What could be the problem?

var newcolorid = 0;

$.ajax({
    url: "/colors",
    dataType: "json",
    success: function(data) {
        var newcolors = [];
        jQuery.each(data.colors, function (i, elem){
            newcolors.push([elem.color_code, elem.label, elem.id]);
        });
        for(var i=0;i<newcolors.length;i++){
            if(newcolors[i][1]==label){
                newcolorid = newcolors[i][2];
                console.log(newcolorid);
                break;
            }
        }
    }
});

for (var i = 0; i < spectrums.length; i++) {
    if (spectrums[i]) {
        var spectrumPalette = spectrums[i].option("palette");
        spectrumPalette.push([[rgb, label, newcolorid]]);
        spectrums[i].option("palette", spectrumPalette);
    }
}

ajax is asynchronous, you're running your code before the request was completed. try moving it to the callback — andrew, Jul 24 '15 at 11:01
Are you sure it's not a typo? The code seems fine. Unless you expect the new value in the bottom loop. — Shomz, Jul 24 '15 at 11:02
thanks, that worked, but there is a little delay, is there any way to make it faster? — SpeekaDievs, Jul 24 '15 at 11:05
the delay is caused by the time it takes the server to respond, to make it faster get a faster internet connection. Its normal to display a loading gif though — andrew, Jul 24 '15 at 11:06

score 2 · Accepted Answer · answered Jul 24 '15 at 11:02

It's because your loop is executed before the back end returns the value so when it run the value is unchanged.

Back end call are asynchronous (unless set otherwise) which mean they do not block the execution of the rest of the script and are executed when the back end reply is received.

You need to move the code inside the success callback if you want to use the new value or move that code into a function which get called from the success callback.

var newcolorid = 0;

$.ajax({
    url: "/colors",
    dataType: "json",
    success: function(data) {

        var newcolors = [];

        jQuery.each(data.colors, function (i, elem){
            newcolors.push([elem.color_code, elem.label, elem.id]);
        });

        for(var i = 0; i<newcolors.length; i++){
            if(newcolors[i][1]==label){
                newcolorid = newcolors[i][2];
                console.log(newcolorid);
                break;
            }
        }

        for (i = 0; i < spectrums.length; i++) {
            if (spectrums[i]) {
                var spectrumPalette = spectrums[i].option("palette");
                spectrumPalette.push([[rgb, label, newcolorid]]);
                spectrums[i].option("palette", spectrumPalette);
            }
        }
    }
});

jquery cannot set a variable

1 Answers1