Jquery Ajax GET call different results

Question

I've written a few lines of code to tackle the following problem:

Get the TwitchTV UserID based on the username. The usernames are in an arrray. After hitting a button a GET AJAX request will be called to GET the UserID and to push it in another array and the call to the API will made via AJAX after hitting a button.

My problem is that if I hit the button again the usersID are in wrong order.

If I set async: false, it works.

Is this problem because of Asynchronous AJAX? What would be the approach for a valid fix? Use callback? A hint in the right direction would be appreciated.

The comments in the code are for testing.

Code:

<script>

        var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "spicyjewlive"];
            clientID = "?client_id=XXX";
            userID = [];
            userStatus = [];
for(var i=0; i<users.length; i++){
          idCall(users[i]);

        };
function idCall (data){
            $.ajax({
              type: "GET",
              url: "https://api.twitch.tv/kraken/users/" + data + clientID,
              async: false,
              cache: false,
              dataType: "jsonp",
              success: function (data){
                console.log(data._id);
              }, 
              error: function (data) {
                console.log("error");
              }});
        };
</script>

Answer 1

Use an array of request promises and update the dom after all those are resolved. The results will be in same order as original users array

var requestPromises = users.map(idCall);

$.when.apply(null, requestPromises).then(function(){
   var dataArray = [].slice.call(arguments);   
   // now loop over data array which is in same order as users
   dataArray.forEach(function(userData){
     // do something with each userData object
   });   
}).fail(function(){
   console.log("Something went wrong in at least one request");
});

function idCall(user) {
  // return the ajax promise
  return $.ajax({    
    url: "https://api.twitch.tv/kraken/users/" + user + clientID,
    dataType: "jsonp"
  }).then(function(data) {
    // return the data resolved by promise
    return data;
  });
};

Answer 2

What would be the approach for a valid fix?

I think @charlieftl answer is a good one. I don't think I can really improve on this. I've mainly added this to try and explain your difficulties here. As I mentioned in a previous question you posted, you need to read and understand How do I return the response from an asynchronous call?.

If you had control of the server side then a simpler option is to send the array server side in order and use this to maintain the order, but your using a third party API so this isn't really practical.

A simpler option would be to use a callback method:

 var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "spicyjewlive"];
 var clientID = "?client_id=XXX";
 var userID = [];
 var userStatus = [];
 idCall(users);


 function idCall (users, x=0){
        if (x < users.length)
        {
            var data = users[x];
            $.ajax({
              type: "GET",
              url: "https://api.twitch.tv/kraken/users/" + data+ clientID,
              cache: false,
              dataType: "jsonp",
              success: function (data){
                console.log(data._id);
              }, 
              error: function (data) {
                console.log("error");
              }})
              .then(function(){
                  idCall(users, x++);
              });
          }
    };

though like I said, charlies answer is better. This will guarantee the order and won't lock the UI. But it's slow.

Is this problem because of Asynchronous AJAX?

Yes, well asynchronous processing on a server and ordering.

When you first this open up the network panel of your debugging tool and watch the HTTP requests. What you'll see is a load of requests getting sent off at the same time but returning in different orders. You cannot guarantee the response order of a async request. It depends on the server response time, load, etc.

Example:

These request we're sent in order A,B,C,D,E,F,G but the responses we're received in B,C,E,F,G,D,A this is the nub of your problem.

Setting async to false does this:

Now no request will be sent until the previous has returned but. So stuff is sent A-G and returns A-G but this is A LOT slower than the previous example (the graphs here aren't to scale, I struggled to capture a good async:false example as I never use it, see reasons below).

Never do this (pretty much ever). What will happen is the UI thread will become locked (Javascript/browsers are single threaded, mostly) waiting for an external call and your web site will become unresponsive for long periods of time. Locking this thread doesn't just stop Javascript, it stops the entire site, so links don't work, hover overs, everything, until the async call returns the thread back to the UI.

Answer 3

Yes, it is because of the AJAX calls. One AJAX call might finish before the other and therefore the different order.

An obvious solution is to use jQuery promises but another solution to this problem could be that you sort your array after your AJAX calls have been completed.

You can sort your array according to the username string like this:

data.sort();

If you have an array of objects, which you don't in the example code, you can sort it like this:

data.sort(function (a, b) { return (a.Name > b.Name) ? 1 : ((b.Name > a.Name) ? -1 : 0); } );

After going through the comments, I thought to give some more code that can a better idea on how to solve this.

<script>

var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "spicyjewlive"];
clientID = "?client_id=XXX";
userID = [];
userStatus = [];

var count = 0;
for(var i=0; i<users.length; i++){
    idCall(users[i]);
}

function idCall (data){
   $.ajax({
        type: "GET",
        url: "https://api.twitch.tv/kraken/users/" + data + clientID,
        async: false,
        cache: false,
        dataType: "jsonp",
        success: function (data){
            console.log(data._id);
            userID.push(data._id);
            count++;
            if( count === users.length - 1 ) {
                userID.sort();
            }
        }, 
        error: function (data) {
            console.log("error");
        }

   });
}