Array element is there but it isn't there

Question

1. Listen to a "Keyup" in an input field
2. Define "enableSubmitButton" as an array
3. Do some stuff
4. Add an array element to the "enableSubmitButton" array
5. From the current input field I m searching the parent form, and then I loop all input fields
6. In this loop, I make a request to the Server
7. In the "onreadystatechange" function I push another element into the "enableSubmitButton" array

The problem is, that the element that I have pushed within the "onreadystatechange" is not really in the array. When I use the console.log() to view the array, the element is visible, but if I use the "array.length" function, the array element is not included :-O

$('.checkEmail, .checkPwd, .checkPwdC').bind("keyup", function() {
    //define enableSubmitButton as an array
    var enableSubmitButton = [];

    //loop each input field in the form
    $(this).parents("form").find(":input").each(function(index,data){

        //do some "if then else" and other stuff
        ...
        enableSubmitButton.push(true);
        ...

        // Now I make a request to the server with Ajax
        var xmlhttp = new XMLHttpRequest();                                
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                if(xmlhttp.responseText == "doesntExist"){
                    enableSubmitButton.push(true);
                }else{
                    enableSubmitButton.push(false);
                }
            }
        };

        //Request
        xmlhttp.open("GET", "ajax.php?ajaxCase=cuna&userName="+$('#fNewAccount input.checkAvailability').val(), true);
        xmlhttp.send();
    });

    // PROBLEM
    // and here we have the problem. To debugg, i use the console.log() function as follow
    var okForSubmit = true;

    console.log(enableSubmitButton);
    console.log("array length: "+enableSubmitButton.length);

    for(var i = 0 ; i < enableSubmitButton.length ; i++){
        if(enableSubmitButton[i] == false){
            okForSubmit = false;
        }
        var newTime = Math.floor(Math.random() * (100 - 1 + 1)) + 1;
        console.log(i+" - "+enableSubmitButton[i]+" - "+newTime+" - "+okForSubmit);
    }
});

Here is the console.log() output:

(4) [true, true, true, true]
0: true
1: true
2: true
3: true
4: false
length: 5
__proto__: Array(0)

array length: 4
0 - true - 54 - true
1 - true - 19 - true
2 - true - 51 - true
3 - true - 94 - true

Any Ideas?

Answer 1

That is just the JavaScript console itself: it logs a mixture of live objects and text:

stuff=[true];
console.log(stuff);
stuff.push(false);

If you execute this in a JavaScript console, you will see something like

> (1) [true]

Which comes from the log, before the push. But if you open the ">" part, it will show the current state of the object, including the result of the push:

(1) [true]
 0: true
 1: false
 length: 2

So the (1) [true] part is just text, it will not get updated, but the object gets evaluted when you "open" its details (using the small arrow). If you push something again, nothing will change (on the screen of course), but closing-reopening the details can be used to evaluate the object again, etc.

Answer 2

This is a typical asynchronicity problem: the HTTP request will only come with the response (calling the callback) after all your other code has finished running.

It is misleading that the console shows the element in the array, but that is because the console receives only the reference of the array, and once you look into it, the HTTP response has already been processed, and so you see the content in the console.

To really see what the array content is at the moment the console.log call is executed, serialise the array like this:

console.log(JSON.stringify(enableSubmitButton));

Now you will see it is actually empty.

In order to fix the base problem you could make use of the promise that jQuery returns for the Ajax methods it exposes (which are anyway easier to use than httpRequest). Then you would first collect all those promises in an array, and then call $.when on them. The callback of this $.when call will only execute when you have received all the Ajax responses, and only then you can safely create your enableSubmitButton array.

Here is a simplified proof of concept:

$('button').click(function f(e) {
    e.preventDefault();
    var $inputs = $(this).parents("form").find(":input");
    var promises = $inputs.map(function(index, data){
        // Make your request with jQuery, which returns a promise
        // I use a test URL here; replace with your own
        var url = "https://jsonplaceholder.typicode.com/posts/" + (index+1);
        return $.get(url).then(function(response) {
            return response == "doesntExist"; // a boolean
        });
    }).get(); // array of promises
    // When all promises have resolved, only then get your array
    $.when.apply($, promises).then(function () {
        // Get the arguments -- which are the values returned by the `then` callbacks:
        var enableSubmitButton = [].slice.call(arguments);
        console.log('result', enableSubmitButton);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input value="100"><input value="abc">
    <button>Click me</button>
</form>