Global variable not set value in $.getJSON properly

Question

I have declared global variable named counter=0 on my index.html page inside head section

<script>
var counter=0;
</script>

now in my one of function i am setting its value as

    function getCounter(param)
    {
        $.getJSON("somewebserviceURL&format=json&callback=?",
            function(data)
            {
                 $.each(data, function(i, item)
                    {
                        counter++;
                    });

            });
//I am not able to get the latest value here & in upcoming functions which use this variable
         alert(counter);

    }

possible duplicate of Can't get correct return value from an jQuery Ajax call — Felix Kling
– Felix Kling, Commented Feb 28, 2012 at 11:58

Rory McCrossan · Accepted Answer · 2012-02-28 10:03:08Z

3

This is because getJSON is asynchronous. This means the counter variable will not have been incremented before alert(counter) is hit. Instead, move the alert to just after your $.each() loop:

function getCounter(param) {
    $.getJSON(
        "somewebserviceURL&format=json&callback=?",
        function(data) {
            $.each(data, function(i, item) {
                counter++;
            });
            alert(counter);
        }
    );
}

answered Feb 28, 2012 at 10:03

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

3 Comments

JMohasin Over a year ago

can you tell me the way that i can get count value outside of $.getJSON() call or if i use $.POST() method from jquery does it resolve problem?

Rory McCrossan Over a year ago

You can only work with the count value inside the callback function of an AJAX method, whether you do this directly, as in your example, or by calling a function elsewhere and passing your variables to it.

JMohasin Over a year ago

basically i want $.getJSON() should executed its success function & code should run according to line numbers means top to bottom without skipping any line

Christofer Eliasson · Accepted Answer · 2012-02-28 10:03:06Z

1

That is because getJSON is sent asynchronously. Your alert is called before the success-callback of getJSON. The success-callback isn't called until you have the response, by then alert() has already fired.

answered Feb 28, 2012 at 10:03

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

Comments

mas-designs · Accepted Answer · 2012-02-28 10:07:15Z

1

Simply because your alert() is processed faster than your counter++;

Your .getJSON() is simply an AJAX-Call which is asynchronous.

http://www.tizag.com/ajaxTutorial/

Which means the JavaScript code, does not wait until your AJAX Call is finished, it continues without waiting.

edited Feb 28, 2012 at 10:07

answered Feb 28, 2012 at 10:02

mas-designs

7,5311 gold badge33 silver badges56 bronze badges

Comments

Ketan Modi · Accepted Answer · 2012-02-28 10:03:04Z

0

function getCounter(param)
{
    $.getJSON("somewebserviceURL&format=json&callback=?",
        function(data)
        {
             $.each(data, function(i, item)
                {
                    counter++;
                });
             // try this
             alert(counter);
        }
     );
}

answered Feb 28, 2012 at 10:03

Ketan Modi

1,8001 gold badge16 silver badges30 bronze badges

Comments

Arie van Someren · Accepted Answer · 2012-02-28 10:22:09Z

0

You could probably use a callback for this :

function getCounter(param, callback) {
    $.getJSON("somewebserviceURL&format=json&callback=?",
        function(data)
        {
             $.each(data, function(i, item)
                {
                    counter++;
                });

             callback.call(this, counter);
        }
     );
}

getCounter(param, function(counter) { alert(counter);  } );

answered Feb 28, 2012 at 10:22

Arie van Someren

4573 silver badges10 bronze badges

Comments

Arun Rana · Accepted Answer · 2012-02-28 10:29:00Z

0

All of are true here that GetJson is asynchronous!

Just shift alert() to inside fore each loop to see affected value as per below

 function getCounter(param)
    {
        $.getJSON("somewebserviceURL&format=json&callback=?",
            function(data)
            {
                 $.each(data, function(i, item)
                    {
                        counter++;
                        alert(counter);

                    });

            });

    }

answered Feb 28, 2012 at 10:29

Arun Rana

8,59414 gold badges71 silver badges110 bronze badges

Collectives™ on Stack Overflow

Global variable not set value in $.getJSON properly

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related