I'm facing an issue with a global JavaScript array. At the beginning of the function, I can successfully call values from it. However, as the function progresses, when I try to alert leaders[i], it shows up as undefined: It seems like the problem arises when there are nested AJAX calls within each other, causing JS to not find the values in the array.
JS
function accessLeaders(bool) {
var leaders = new Array();
leaders.push('444');
leaders.push('111');
$.ajax({
url: 'url',
crossDomain: true,
type: 'post',
data: {
'clubID': curClub
},
success: function (data) {
for (var i = 0; i < leaders.length; i++)
{
alert(leaders[i]); <===== This works fine here
$.ajax({
url: 'someurl',
crossDomain: true,
type: 'post',
data: {
'id': leaders[i] <====== This works fine here
},
success: function(data3) {
alert(leaders[i]); <======= This is undefined here
var json3 = jQuery.parseJSON(data3);
}
});
}
}
});
};