$getJSON and for loop issue

Question

This is to populate a table with the amount of results that are returned from the MediaWiki API query `/api.php?action=query&list=querypage&qppage=BrokenRedirects`. The number of results is then added to the id, for example: ``` // BrokenRedirects $.getJSON('/api.php?action=query&list=querypage&qppage=BrokenRedirects&format=json', function (data) { $('#BrokenRedirects').text(data.query.querypage.results.length); }); ``` But as it's being repeated another 7 times I made the arguments for qppage into an array and used a for loop to shorten overall code. ``` var array = ['BrokenRedirects', 'DoubleRedirects', 'Unusedcategories', 'Unusedimages', 'Wantedcategories', 'Wantedfiles', 'Wantedpages', 'Wantedtemplates']; for (var i = 0; i < array.length; i++) { $.getJSON('/api.php?action=query&list=querypage&qppage=' + array[i] + '&format=json', function (data) { $('#' + array[i]).text(data.query.querypage.results.length); }); } ``` The first, unlooped, version works. But when I added a loop it d…

Accepted Answer

That's a classical problem : `i` has the value of end of loop when the callback is called.

You can fix it like this :

```
for (var i = 0; i < array.length; i++) {
    (function(i) { // protects i in an immediately called function
      $.getJSON('/api.php?action=query&list=querypage&qppage=' + array[i] + '&format=json', function (data) {
        $('#' + array[i]).text(data.query.querypage.results.length);
      });
    })(i);
}
```

2018 addendum:

There's now another cleaner solution in today's browsers: use `let` instead of `var`:

```
for (let i = 0; i < array.length; i++) {
    $.getJSON('/api.php?action=query&list=querypage&qppage=' + array[i] + '&format=json', function (data) {
        $('#' + array[i]).text(data.query.querypage.results.length);
    });
}
```

$getJSON and for loop issue

Solution

Problem

Related problems