Question

I am updating some div as follows:

for(var i = 0; i < data.length; i++) {
    var query = base_url + data[i];
    $.ajax({
        url: query,
        type: 'GET',
        dataType: 'jsonp',
        timeout: 2000,
        error: function() { self.html("Network Error"); },
        success: function(json) {
            $("#li" + i).html("<img src='" + json.result.list[0].url + "' />")
        }
    });
}

The value of i does not work inside the ajax call. I am trying to pass the value of i so that it can attach the element to the proper div. Can someone help me out?

Answer 1

Ok. This works but would really love if someone can explain it! I broke my head over this so posting it here just in case someone needs it.

for(i = 0; i < data.length; i++)
   fetchItem(i)

fetchItem = function(i) {
    var query = base_url + data[i]; 
    $.ajax({ 
        url: query, 
        type: 'GET', 
        dataType: 'jsonp', 
        timeout: 2000, 
        error: function() { self.html("Network Error"); }, 
        success: function(json) { 
            $("#li" + i).html("<img src='" + json.result.list[0].url + "' />") 
        } 
    }); 
}