JQuery Ajax call in loop loosing local variable reference

Question

I am making several jQuery ajax calls in a loop. Every time one of the ajax calls causes a return, I need to refer to the value corresponding to the original ajax call. My current code does not work correctly because the value of the lskey variable was changed by further iterations of the loop.

Here is the code:

 for (var i = 0, len = localStorage.length; i < len; i++) { var lskey = localStorage.key(i); if (lskey.substr(0, 4) === 'form') { var postdata = localStorage.getItem(lskey); // Get the form data $.ajax({ type: "POST", async: "false", url: "/Profile/PostForm", data: postdata, success: function (data) { $('#rollinginfo').append('<br>' + data + ',key=' + lskey); localStorage.removeItem(lskey); // Remove the relevant localStorage entry } , error: function (data) { $('#rollinginfo').append('<br />ERR:' + data); } }); } } 

The problem is that lskey changes every time the loop executes, and therefore the success callback does not reference the lskey value that existed during the call.

How to edit the correct lskey value for each successful callback?

Answer 1

 for (var i = 0, len = localStorage.length; i < len; i++) { var lskey = localStorage.key(i); if (lskey.substr(0, 4) === 'form') { var postdata = localStorage.getItem(lskey); // Get the form data $.ajax({ type: "POST", async: "false", url: "/Profile/PostForm", data: postdata, local_lskey: lskey success: function (data) { $('#rollinginfo').append('<br>' + data + ',key=' + lskey); localStorage.removeItem(this.local_lskey); // Remove the relevant localStorage entry } , error: function (data) { $('#rollinginfo').append('<br />ERR:' + data); } }); } } 

That should work.

Answer 2

At the end, I added the key information to the server’s publication, and then returned it from the server in JSON format so that the success function could just refer to the key contained in the server’s response.

Answer 3

Have you considered connecting AJAX calls? Basically you can make one AJAX call, process the result, change lskey, etc. Then, when you are ready, increment i and make the second AJAX call. Quote this path instead of using the for ... loop

Answer 4

You can put your ajax call in your own function and pass the values ​​of lskey and postData . Thus, localStorage.removeItem(lskey) will refer to the lskey variable in the context of the function, not the loop context.

Example

Declare a function -

 function postForm(postdata, lskey) { $.ajax({ type: "POST", async: "false", url: "/Profile/PostForm", data: postdata, success: function(data) { $('#rollinginfo').append('<br>' + data + ',key=' + lskey); localStorage.removeItem(lskey); // Remove the relevant localStorage entry }, error: function(data) { $('#rollinginfo').append('<br />ERR:' + data); } }); } 

Then you can call your function from your loop -

 for (var i = 0, len = localStorage.length; i < len; i++) { var lskey = localStorage.key(i); if (lskey.substr(0, 4) === 'form') { var postdata = localStorage.getItem(lskey); // Get the form data postForm(postdata, lskey); } } 

You can also declare a function just before the loop (assigning it to a variable), and then call it in the loop.

 var postForm = function(postdata, lskey) { $.ajax({ type: "POST", async: "false", url: "/Profile/PostForm", data: postdata, success: function(data) { $('#rollinginfo').append('<br>' + data + ',key=' + lskey); localStorage.removeItem(lskey); // Remove the relevant localStorage entry }, error: function(data) { $('#rollinginfo').append('<br />ERR:' + data); } }); } for (var i = 0, len = localStorage.length; i < len; i++) { var lskey = localStorage.key(i); if (lskey.substr(0, 4) === 'form') { var postdata = localStorage.getItem(lskey); // Get the form data postForm(postdata, lskey); } }