Re-associate AJAX call with original URL using jQuery

Question

I'm not sure how to even explain this, which makes it very difficult to search on (especially because I am SURE this is an error in thinking).

I have an array of objects:

var a = [
    {
        url: "http://www.discusionboard.com/list-of-boards/", 
        name: "Discussion Board One", 
        threads: []
    },
    {url: "...", name: "...", threads: [] }
]

I am looping through these objects, downloading each page, and then trying to add the threads back to the original object.

for( var i = 0; i < a.length; i++ ) {
    jQuery.get(a[i].url, function(result, status, xhr) {
        /* result is list of threads separated by "[SPLIT]" */
        a[i].threads = result.split("[SPLIT]")
    });
}

My issue, then, is that the "i" in a[i].threads is undefined. I can't find a way to pass it into the function, and that makes me think I'm just fundamentally misunderstanding a core concept here.

Any help would be GREATLY appreciated. I'm happy to read myself, if someone could just give me an idea of what I should look for. As you can see by my title, I'm having a hard time even describing what I'm trying to do.

Looks like the closure loop problem: http://stackoverflow.com/questions/1331769/access-outside-variable-in-loop-from-javascript-closure — PleaseStand, Nov 20 '10 at 02:47

PleaseStand · Answer 1 · 2010-11-20T05:58:45.350

This is a good example of the closure loop problem. The callback function you pass to jQuery is executed only after the loop has finished (even after the function it is inside of returns a value). Therefore, a[i] (to the callback function) will always be the last element of the array. jQuery.ajax provides the context setting to address this problem:

for( var i = 0; i < a.length; i++ ) {
    jQuery.ajax({
        url: a[i].url,
        context: a[i],
        success: function(result, status, xhr) {
            /* result is list of threads separated by "[SPLIT]" */
            this.threads = result.split("[SPLIT]")
        }
    });
}

Note that if you have code afterward that needs to make use of the completed objects, that is also a problem. To address this, you would need to put this outside the callback function:

var numRequests = a.length;

And this at the end of the callback function:

if(!--numRequests) {
    // Do whatever now that all object data has been loaded.
}

Awesome. I just learned about "context" and it does just about everything I need for now, but I see how closure could be a problem in other instances. Thanks for the examples! — Nathan Ziarek, Nov 26 '10 at 20:40

Re-associate AJAX call with original URL using jQuery

1 Answers1