Undefined variable error in jQuery

Question

I am getting a JSON data with jQuery in real-time, later I am printing this data to screen. When I get data from screen and I print this on screen again, I take error "undefined". Codes:

var yenile = setInterval(function() {
    $.getJSON("ayarlar.asp",function(veri) {
        $(".wfloodnum").html("Şu anki değer:" + veri.floodwarno);
        $(".nfloodnum").html("Şu anki değer:" + veri.floodnum);
    });
},100);
var anlikwar = $(".wfloodnum").text().split(":")[1];
var anlikflood = $(".nfloodnum").text().split(":")[1];
alert(anlikflood);

What should I do? EDIT: I cant access this variables' values out of $.getJSON function. And I need accessibilty for these value out of this function. So, I must define variables out of $.getJSON function. That's why I tried to apply .split() to text on a screen.

When/where exactly are you getting the error? Please create a http://jsfiddle.net/ demo. In the code you posted it seems you are trying to access the content before it was set. But that would *not* generate an error. Relevant reading material: [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call). — Felix Kling, Jul 04 '13 at 19:11

Gabriel Petrovay · Accepted Answer · 2013-07-04T19:50:40.943

The problem with your code is that, because of the asynchronous call you have there the order of execution might look like this (of course it can differ because of the interval and multiple calls to the getJSON):

// 1. the call to setInterval is initiated (the function in it will not be called until the sequential instructions after setInterval are finished)
var yenile = setInterval(function() {...}, 100);
// 2
var anlikwar = $(".wfloodnum").text().split(":")[1];
// 3
var anlikflood = $(".nfloodnum").text().split(":")[1];
// 4
alert(anlikflood);

// 5. NOW COMES THE function given to setInterval
$.getJSON("ayarlar.asp",function(veri) { ... });
// 6. now would come any other instructions in the function given to setInterval after the getJSON
// 7.
$(".wfloodnum").html("Şu anki değer:" + veri.floodwarno);
// 8
$(".nfloodnum").html("Şu anki değer:" + veri.floodnum);

In the above sequence you see that at steps 2 and 3 the variables there are undefined because the element you access does not have any text yet. Or, it has empty string, split is by : and you get the array [""] and therefore the index 1 in this array is undefined.

You must re-think the structure of your code. At least the variables anlikwar and anlikwar should be assigned after the JSON request completes.

At least you coud do something like:

var anlikwar;
var anlikflood;

var yenile = setInterval(function() {
    $.getJSON("ayarlar.asp",function(veri) {
        $(".wfloodnum").html("Şu anki değer:" + veri.floodwarno);
        $(".nfloodnum").html("Şu anki değer:" + veri.floodnum);

        anlikwar = $(".wfloodnum").text().split(":")[1];
        // or simply: anlikwar = veri.floodwarno
        anlikflood = $(".nfloodnum").text().split(":")[1];
        // or simply: anlikflood = veri.floodnum
    });
},100);

It looks like you want to monitor something on the server. This looks like a WebSockets use case. Depending on the server framework you are using, there are different web socket packages you can use.

Gabriel, thanks for reply. You defined the variable in the $.getJSON function. But if ı make so, I cant access this variables' values out of $.getJSON function. And I need accessibilty for these value out of this function. So, I must define variables out of $.getJSON function. That's why I tried to apply .split() to text on a screen. — Lightsaber, Jul 04 '13 at 19:53
I declared the two variables outside of `getJSON` in case you need them in the same script. If you need them in other parts where they are not visible you would have to get it from a DOM element. In any case you must make sure you already have the values. Either `if (anlikflood) alert(anlikflood);` or `if ($(".nfloodnum").text()) ... do the split.`. As a general notice, avoid the split, by taking the `"Şu anki değer:"` out of the script: `
Şu anki değer: ...
`. It is a bad practice to mix code (`veri.floodnum`) with content (`"Şu anki değer"`) — Gabriel Petrovay, Jul 05 '13 at 12:00

Undefined variable error in jQuery

1 Answers1