Scope of variables inside of javascript

Question

I have the following code sample that im trying to wrap my head around

        $(document).ready(function () {

        test("load json", function () {

            length = 0; // length = 0

            $.getJSON("plugins/form.json", function (data) {
                length = data.fields.length; // length = 4
            });

            ok(length == 4, "length = " + length.toString()); // length = 0? wtf?
        });
    });

the 'length' variable does not persist when the $.getJSON runs. I cant figure out if its because its asynchronous or because the variable is out of scope.

davidsleeps · Accepted Answer · 2010-04-19 05:44:49Z

3

If the getJSON method is running asynchronously, then the ok(... line will likely execute before the getJSON returns...thus length will always be 0...

could you not do this...

$.getJSON("plugins/form.json", function (data) {  
   var somelength = data.fields.length;  
   ok(somelength == 4, "length = " + somelength.tostring());  
});

that way it calls the ok function once the getJSON has returned with data...

answered Apr 19, 2010 at 5:44

davidsleeps

9,52111 gold badges62 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christian C. Salvadó Over a year ago

That's completely right but not enough, the test runner needs to be paused and resumed, check my answer and example

davidsleeps Over a year ago

I wasn't familiar with QUnit...+1 your answer...but mine is still providing an answer to why the code isn't working (hopefully!)...

Christian C. Salvadó · Accepted Answer · 2010-04-19 06:14:03Z

You should make an asynchronous test, and since you are using QUnit, you can use the stop method, make your assertions on the getJSON callback, and then resume the following tests:

$(document).ready(function () {

    test("load json", function () {
        stop();

        $.getJSON("plugins/form.json", function (data) {
            var length = data.fields.length;
            ok(length == 4, "length == " + length);
            start(); // resume tests
        });
    });
});

Or you can use the asyncTest method instead of test, which will implicitly make a call to stop:

//...
asyncTest("load json", function () {

    $.getJSON("plugins/form.json", function (data) {
        var length = data.fields.length;
        strictEqual(length, 4, "length"); 
        //...
        start(); // resume tests
    });
});
//...

Check a live example here and give a look to the source code here.

YOU · Accepted Answer · 2010-04-19 05:45:32Z

1

Its not because of scope issue, but because of this line run first

ok(length == 4, "length = " + length.toString());

before callback function from JSON

function (data) {
    length = data.fields.length; // length = 4
}

You need to put ok(length == 4, "length = " + length.toString()); function inside callback function of $.getJSON.

answered Apr 19, 2010 at 5:45

YOU

124k34 gold badges191 silver badges222 bronze badges

Comments

deceze · Accepted Answer · 2010-04-19 05:53:36Z

1

Yes, that would be because it's asynchronous.

test("load json", function () {

     // executes first

     $.getJSON("plugins/form.json", function (data) {

         // executes last (that is, "sometime later")

     });

     // executes second

});

Also, you should declare the variable as var length the first time, unless you want it to be global.

edited Apr 19, 2010 at 5:53

answered Apr 19, 2010 at 5:45

deceze♦

525k89 gold badges806 silver badges954 bronze badges

Comments

Umang Goyal · Accepted Answer · 2010-04-19 10:23:47Z

-1

Try this - $(document).ready(function () {

var length = 0; // length = 0
    test("load json", function () {

        $.getJSON("plugins/form.json", function (data) {
            length = data.fields.length; // length = 4
        });

        ok(length == 4, "length = " + length.toString()); // length = 0? wtf?
    });
});

answered Apr 19, 2010 at 10:23

Umang Goyal

591 bronze badge

Collectives™ on Stack Overflow

Scope of variables inside of javascript

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related