Loading multiple JSON files in D3 in a loop: index is always the last one

Question

I'm trying to create many charts each with different JSON data. I have a loop which tries to load the data for each chart, but although the calls are asynchronous, the loop index is always the last one. Instead of doing 0,1,2,3,4,5 it does 5,5,5,5,5,5. Here's an example with 2 items to loop over:

var charts_data = [ [some_url, "value1", "value2", 1],
                    [some_url, "value1", "value2", 1] ]

for (var i = 0; i < charts_data.length; i++) {

    var _this = this;
    var _i = i

    d3.json(charts_data[i][0], function(error, json_data) {
        console.log("- - - - - - - - - - - - - - - - - - #"+ _i +" ORIGINAL DATA : ")
        format_raw_data(json_data, _this.charts_data[_i][1], _this.charts_data[_i][2], _this.charts_data[_i][3]); 
    });

}

And the problem is shown by the console log which says:

- - - - - - - - - - - - - - - - - - #1 ORIGINAL DATA :  
- - - - - - - - - - - - - - - - - - #1 ORIGINAL DATA :

I tought that d3.json being asynchrnous meant this wouldn't happen, but I guess I don't fully grasp that concept.

Any ideas for a remedy?

musically_ut · Accepted Answer · 2013-11-21 20:36:32Z

2

The problem is that the variable _i is still bound to the outside scope and is updated before the async call to fetch the json data is made.

It can be fixed by wrapping it in a closure like this:

for (var i = 0; i < charts_data.length; i++) {

    var _this = this;
    (function (_i) {

        d3.json(charts_data[i][0], function(error, json_data) {
            console.log("- - - - - - - - - - - - - - - - - - #"+ _i +" ORIGINAL DATA : ")
            format_raw_data(json_data, _this.charts_data[_i][1], _this.charts_data[_i][2], _this.charts_data[_i][3]); 
        });
    })(i);
}

answered Nov 21, 2013 at 20:36

musically_ut

34.3k9 gold badges98 silver badges110 bronze badges

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

1 Comment

jcnesci Over a year ago

Awesome, thanks so much. I had searched tons already but also just found a similar answer here, if useful for others: stackoverflow.com/questions/13343340/…

Collectives™ on Stack Overflow

Loading multiple JSON files in D3 in a loop: index is always the last one

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related