Create AJAX in a loop

Question

Is it possible to loop an ajax url like the mentioned code below?

var partsOfStr = [james, mary, kingkong]
 for (i = 0; i < partsOfStr.length; i++) {

  $.ajax({
  url: **'http://mp02.mybitmp.org/friendzone/getsurvey.php?Name=' + 
  partsOfStr[i],**
  dataType: 'json',
    success: function (done) {
     console.log(done);
     alert(partsOfStr[i])
    }
  });
}

Not quite. See [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/q/750486/218196) — Felix Kling, Feb 03 '18 at 03:17

score 0 · Answer 1 · answered Feb 03 '18 at 03:04

As long as you do not expect your answer results (i.e. the success callback) to come back at the same time, then yes. Otherwise, you will see the logs for different values in random orders because making AJAX requests is Asynchronous.

If you want to do the loop so that the results come back in order, you have to use Promises or do some form of calling the next element in the success or failure callback. I'd suggest using Promise.all

score 0 · Answer 2 · answered Feb 03 '18 at 03:34

The only problem you have with this code is relating to alert(partsOfStr[i]).

It will always give the output 2 - because the variable i is being accessed in a closure. By the time it is accessed, the loop is over and the final value of i will be 2.

Look at this question for details.

Additionally, if you have to make these requests in the same order as specified in the array, then you will have to remove the loop and recurse the call from within the results.

score 0 · Answer 3 · answered Feb 03 '18 at 05:23

As Charlie mentioned when you use async in a loop or something with a callback you can't use the loop variable as a direct closure.

A simple solution is as Robert mentions to use Promise.all since $.ajax returns a promise like object. It would look something like this:

var partsOfStr = [james, mary, kingkong];

Promise.all(
  partsOfStr.map(
    function(part){
      return $.ajax({
        url: 'http://mp02.mybitmp.org/friendzone/getsurvey.php?Name=' + part,
        dataType: 'json',
      })
      .then(
        function(result){
          console.log("result for "+part+" received");
          return result;
        }
      )
    }
  )
).then(
  function(results){
    console.log("All results received",results.length);
  }
).catch(
  function(err){
    console.warn("Something went wrong:",err);
  }
);

If you want to support browsers that don't have native promises or don't want to polyfil it you can use jQuery.when instead of Promise.all:

var partsOfStr = [james, mary, kingkong];

$.when.apply(
  $,
  partsOfStr.map(
    function(part){
      return $.ajax({
        url: 'http://mp02.mybitmp.org/friendzone/getsurvey.php?Name=' + part,
        dataType: 'json',
      })
      .then(
        function(result){
          console.log("result for "+part+" received");
          return result;
        }
      )
    }
  )
).then(
  function(results){
    console.log("All results received",results.length);
  }
).catch(
  function(err){
    console.warn("Something went wrong:",err);
  }
);

Create AJAX in a loop

3 Answers3