Question

I want to load an array of XML files, and store them in an array.

Code example:

var src = [ "a", "b", "c", "d" ];
var dest = {};
for (var i in src) {
    var req = new XMLHttpRequest();
    req.open("GET", src[i], true);
    req.onreadystatechange = function(aEvt) {
        if (req.readyState == 4) {
            if (req.status == 200) {
                dump(i + "\n");
                dest[i] = req.responseXML;
            }
        }
    }
    req.send(null);
}

However, the dump result is always

3

3

3

3

It shows that the i referenced in callback is always the outer i, so the XML files cannot be stored correctly.

So, how to solve this issue? We have about 50 XML files to load and loading them one by one is not acceptable.

Thank you.

Answer 1

1. Don’t use for..in to loop over arrays. Use a normal for loop.
2. You make the typical mistake of creating a function in a loop. JavaScript has no block scope, only function scope, so i will always refer to the last element of the array you looped over when the functions you created are executed. They all have a reference to the same i. You can solve this by using an immediately executing function that returns a function (thus, capturing the value of i).
3. If you do this, you also have to capture a reference to req, otherwise it will always refer to the last generated XMLHttpRequest (the same reason as for i).

So one solution would be:

var src = [ "a", "b", "c", "d" ];
var dest = {};
for (var i = src.length;i--;) {
    var req = new XMLHttpRequest();
    req.open("GET", xmlfile, true);
    req.onreadystatechange = (function(i, req) {
        return function(aEvt) {
            if (req.readyState == 4) {
                if (req.status == 200) {
                    dump(i + "\n");
                    dest[i] = req.responseXML;
                }
            }
        };
    }(i, req)); // capturing the current value/reference of i and req
    req.send(null);
}

@Spiny Norman’s solutions might be more readable 😉