javascript array empty outside a function

Question

I have JavaScript code like this:

var buffer=new Array();

function fetchData(min,max){
    var ajaxReq = new XMLHttpRequest(); 
    ajaxReq.onreadystatechange = function(){
    if (ajaxReq.readyState === 4) {
        if (ajaxReq.status === 200) {
            buffer= ajaxReq.responseText;
            console.log(buffer)//this logs an array to console
        } else {
            console.log("Error", ajaxReq.statusText);
        }
    }
    };
    ajaxReq.open('GET', "server/controller.php?min="+min+"&max="+max, true); 
    ajaxReq.send();
}

fetchData(1,100);
console.log(buffer);//this log an empty array

two logs with different result, what am I doing wrong? thanks for pointers.

The buffer variable in the fetchData function is conditional set. Are you sure ajaxReq.status and ajaxReq.readyState are equaling what you want? — John Giotta
– John Giotta, Commented Dec 6, 2011 at 21:28

JP Richardson · Accepted Answer · 2011-12-06 21:28:39Z

8

Ajax is asynchronous. That means that console.log(buffer) at the end is executed before the response from the Ajax request.

You should change your method to this:

function fetchData(min,max,callback){
  var ajaxReq = new XMLHttpRequest(); 
  ajaxReq.onreadystatechange = function(){
    if (ajaxReq.readyState === 4) {
      if (ajaxReq.status === 200) {
        buffer= ajaxReq.responseText;
        callback();
        //console.log(buffer)//this logs an array to console
      } else {
        console.log("Error", ajaxReq.statusText);
      }
     }
  };
  ajaxReq.open('GET', "server/controller.php?min="+min+"&max="+max, true); 
  ajaxReq.send();
}

fetchData(1,100,function(){
    console.log("My Ajax request has successfully returned.");
    console.log(buffer);
});

answered Dec 6, 2011 at 21:28

JP Richardson

39.6k36 gold badges123 silver badges152 bronze badges

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

1 Comment

JP Richardson Over a year ago

Yes, but then your user has to wait for the Ajax response, thus locking up your page. Even if the response seems quick now, there'll inevitably be times where it won't be. In short, don't make your Ajax requests synchronous.

Pierre · Accepted Answer · 2011-12-06 21:31:51Z

You are trying to log() the buffer before the AJAX request in executed. To solve this, your fetchData function needs to handle a callback function.

var buffer=new Array();

function fetchData(min,max, callback){
    var ajaxReq = new XMLHttpRequest(); 
    ajaxReq.onreadystatechange = function(){
    if (ajaxReq.readyState === 4) {
        if (ajaxReq.status === 200) {
            buffer= ajaxReq.responseText;
            console.log(buffer)//this logs an array to console
            if(typeof callback == 'function'){
                callback.call(this);
            }
        } else {
            console.log("Error", ajaxReq.statusText);
        }
    }
    };
    ajaxReq.open('GET', "server/controller.php?min="+min+"&max="+max, true); 
    ajaxReq.send();
}

fetchData(1,100, function(){
    console.log(buffer);
});

This is the most basic implementation, and will work only if the AJAX response is successful.

Alex Wayne · Accepted Answer · 2011-12-06 21:30:35Z

2

This is asynchronous. So your flow goes like this:

call fetchData()
ajax request is sent, registering an onreadystatechange callback
fetchData() completes and returns
buffer is logged out, which doesn't yet contain anything.
Sometime later, the ajax request completes and triggers the callback
The callback puts things in the array.
buffer get's logged out from the callback, and you see it now has items in it.

So you are only starting the asynchronous request once you hit that first console.log. But it actually finishes long afterward.

answered Dec 6, 2011 at 21:30

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Comments

uadnal · Accepted Answer · 2011-12-06 21:30:44Z

1

A couple of issues here. When the ajax call completes the 2nd console.log has already executed before the variable was set.

Also,You're not using the buffer varaible as an Array.

answered Dec 6, 2011 at 21:30

uadnal

11.5k2 gold badges35 silver badges40 bronze badges

3 Comments

bingjie2680 Over a year ago

what do you mean not using buffer as an array, how can I use it as an array, thanks for help.

uadnal Over a year ago

buffer.push(ajaxReq.responseText); will push the response text to the end of the array

bingjie2680 Over a year ago

the ajaxReq.responseText is a multi-dimentional array, how I can add all its child arrays to the buffer?

n0wak · Accepted Answer · 2011-12-06 21:30:13Z

0

Seems right to me. buffer is empty to start and it doesn't get set until AFTER the asynchronous call is made, so even though you're fetchingData before the second console.log, you're not receiving it until after it shows an empty buffer.

answered Dec 6, 2011 at 21:30

n0wak

763 bronze badges

Comments

goto-bus-stop · Accepted Answer · 2011-12-06 21:30:59Z

0

MDN: https://developer.mozilla.org/en/XMLHttpRequest

void   open(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);

The third argument is used to tell the browser whether the request should be made asynchronous or not. You set it to true, thus it will be async. Async basically means that the request is sent and meanwhile other code is executed. So, it starts the request, and while waiting for a response, it logs the buffer: before the request has finished. If you want to log the contents, do it in the onreadystatechange event or set the third argument (async) to false.

answered Dec 6, 2011 at 21:30

goto-bus-stop

11.8k2 gold badges26 silver badges31 bronze badges

Collectives™ on Stack Overflow

javascript array empty outside a function

6 Answers 6

1 Comment

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related