JQuery/Ajax calls in a For Loop

Question

Is it possible to put `("xxxxx").html(data)` in a for loop where the "xxxx" variable changes each time? I honestly feel like I've tried everything. I'm trying to fill up an HTML table with JSONP data from a looping ajax call where the URL changes each time. The same callback function is used every time, but, obviously, I keep overwriting the data that is to be sent to the HTML table tags because I can't figure out a way to dynamically change these variables. Basically, I want the first time the callback function is called to store data in something like... ``` $("#p1_points").html(data_from_ajax_call) ``` The second time I want it to do... ``` $("#p2_points").html(data_from_ajax_call) ``` I've tried silly things like (inside a for loop) doing ... ``` $("#p" + i + "_points").html(data_from_ajax_call) ``` and all sorts of fun stuff, but it doesn't accept arguments of any kind... So, any thoughts? Is this trivial and I'm just over-thinking and under-sleeping it? Thanks in advance for any…

Accepted Answer

if you loop looks something like this: ``` for(var i=0; i<10; i++){ $.ajax({ // success:function(data){ $("#p" + i + "_points").html(data); } }); } ``` it will not work as `i` will end up being the last `i` value in the loop; You need something like below ``` for(var i=0; i<10; i++){ (function(index){ $.ajax({ // success:function(data){ $("#p" + index + "_points").html(data); } }); })(i); } ``` The closure along with the passing of `i` will keep number value for that call. of course there will need to exist elements with ids 1-10 or whatever number you use so: ``` ... ``` EDIT to account for JSONP callback: modify myCallback() to be: ``` function myCallback(data,index) ``` and use the index to make your `"#p"+index+"_points"` etc ids and then for the loop and ajax: ``` //Keeps track of the callbacks //we will prepend 'jsonpCallbacks.' to the callback names window.jsonpCallbacks = {}; for (var i = 0; i < thisweeksraiders.length; i++){ (function(index){ window.jsonpCallbacks["myCallback"+index] = function(data){ myCallback(data,index); }; })(i); $.ajax({ "url":"http://us.battle.net/api/wow/character/aerie-peak/" + thisweeksraiders[i] + "?jsonp=jsonpCallbacks.myCallback"+i, "type":"GET", "data": { fields: "items, professions, talents, progression"}, "dataType":"jsonp", "contentType":"application/json", "jsonpCallback":"jsonpCallbacks.myCallback"+i, "success":function(data1){ } }) } ```

JQuery/Ajax calls in a For Loop

Solution

Problem

Related problems