Javascript variable state after ajax request

Question

I'm new in the web programming and I don't fully understand some simple things. Suppose we have following ajax request:

var records = [];
   $.ajax(
   {
        url : "index", 
        dataType: 'json',
        success: function (response)
        {
           records = response;
        }                
   });
   alert(records.length);//This displays 0
   alert(records.length);//This alert correctly displays number of records

The problem is that the array records appears empty, if I try to use them immediately after calling ajax (first alert displays zero length, while second alert displays correct length). What's the problem and how to solve it?

There should be a general warning when asking this question, as it's asked at least 50 times every day! — adeneo, Nov 21 '13 at 23:02
Please do a little bit more research before you ask this kind of questions. — putvande, Nov 21 '13 at 23:03

score 3 · Answer 1 · answered Nov 21 '13 at 23:01

You just need to put your alert inside the success callback.

   var records = [];
   $.ajax(
   {
        url : "index", 
        dataType: 'json',
        success: function (response)
        {
           records = response;
           alert(records.length);  // will always be correct
        }                
   });

In your example, the behavior will be unpredictable and will depend on how fast the call returns.

score 2 · Answer 2 · answered Nov 21 '13 at 23:02

The A in Ajax stands for Asynchronous

The success function doesn't trigger until the HTTP response comes back.

When the first alert fires, it hasn't come back. In the time it takes for you to click OK to that alert, the response has arrived so the success function has run by the time the second alert fires. (alert is a blocking function).

Do your work on the data in the success function, not immediately after sending the HTTP request.

Javascript variable state after ajax request

2 Answers2