How to retrieve a variable in jquery ajax .done() - asp.net-mvc

Question

Stackoverflow(ers),
I have created a javascript function in which to process data from an array of objects, and in this function I am iterating through the array calling an ajax request for each object in the array.
However, inside the ajax.done() function, I need to pass in the index of the iteration, j. Inside the iteration, however, j is stuck on 4, whereas outside the iteration, j counts successfully with the iteration. Note that the i iteration in the code below loops through inside each ajax request to pull out certain values to form an array, so can be ignored.
Can anyone help me in working out what I need to do to make j iterate inside the .done() block?
Thanks,
Jamie
Object Passed To Code:
var dataConfig = [
{ targetDiv: "#chart", chartTitle: "Title", tooltipVisible: true, xAxisLabel: "Label", leftYAxisLabel: "Unit" },
{ apiUrl: "URL", type: "column", yAxis: "right", visibleInLegend: false },
{ apiUrl: "URL", type: "line", yAxis: "left", visibleInLegend: false },
{ apiUrl: "URL", type: "line", yAxis: "left", visibleInLegend: false },
];
The Code:
for ( var j = 2; j < dataConfig.length; j++ ) {
console.log(j);
chartConfig[j] = {
yAxisValues: [],
type: dataConfig[j].type,
yAxis: dataConfig[j].yAxis,
visibleInLegend: dataConfig[j].visibleInLegend
}
$.ajax({
url: baseURL + dataConfig[j].apiUrl,
beforeSend: function ( xhr ) {
xhr.setRequestHeader('Authorization', 'yes');
}
}).done(function (data) {
//get Y Axis Values
var yAxisData = data.DataSeries.Data;
yAxisValues = [];
for ( var i = 0; i < yAxisData.length; i++ ) {
var yAxisValue = yAxisData[i].Y[0];
yAxisValues.push(parseInt(yAxisValue, 10));
};
console.log(yAxisValues);
console.log("j:", j);
// chartConfig[j].yAxisValues = yAxisValues;
});
};

Answer 1

AJAX is asynchronous. The .done() method will run at a point that is most likely out of sync with the parent for loop, thus you can't rely on the variable 'j'.
You can use the following syntax to achieve what you want to by capturing the value of j in a self executing function:
for ( var j = 2; j < dataConfig.length; j++ ) {
(function(index) {
$.ajax({
url: baseURL + dataConfig[j].apiUrl,
beforeSend: ...
}).done(function(data) {
console.log(index);
});
})(j);
}