multiple ajax call ajax

Question

I' trying to make a multiple ajax call and get the data accordingly. I'm making a call using a for loop and it works to a extend but the problem is the result I get is not in order and every time I refresh the results order changes.

$(document).ready(function() {

  getEventData();
});

function getEventData() {

  var cars = ["recFJekME3X8XF55g", "recpzMtGIWOfMVnMz", "recSholMmG3Q6axgq", "recRB9Bct42cbcV7C", "recExwVPJ5bxfOKGV"];
  var length = cars.length;
  var i;

  for (i = 0; i < length; i++) {
    if (i in cars) {
      var url = 'https://api.airtable.com/v0/yourappid/tablename/' + cars[i] + '';
      $.ajax({
        url: url,
        headers: {
          'Authorization': key
        },
        type: 'GET',
        ContentType: "application/json; charset=utf-8",
        crossDomain: true,
        success: function(data) {
          processData(data);

        },
        error: function(data, errorThrown) {
          alert("not success!!");
        }
      });
    }

  }
}



function processData(data) {

  var title = data.fields['Product Title'];
  var artUrl = data.fields['Manufacturer Homepage Link'];


  $('#someDiv').append('<a href="' + artUrl + '" target="_blank"> <div class="title">' + title + '</div>');

}

<div class="wrapper">
  <div id="someDiv"></div>
</div>

result before refreshing

result after refreshing

One approach is to call a method to perform the operation for the first element, and in the success, call the same method for the next element, recursively doing so until all the elements have been processed. — Taplar, Dec 05 '18 at 19:42
If you use Promise.all(), the result will be in order. This should do it: https://pastebin.com/q4Hfp25y — Chris G, Dec 05 '18 at 19:49
@ChrisG I tried using your method but i'm getting no result. — Reh, Dec 05 '18 at 19:57
@ChrisG I'm not getting any error message the platform i'm using doesn't display the error but you can try on urs appid for api calll : appHXAtvtqG544z0Z and tablename:Camel Sample and key:Bearer keyUdFHAAdlLktZ5y — Reh, Dec 05 '18 at 20:01
I can't due to CORS. Anyway, I found the issue, I misplaced a closing parens. Live working example: https://jsfiddle.net/khrismuc/w1Lkj7dc/ — Chris G, Dec 05 '18 at 20:08
Why do you need `if (i in cars)`? Unless `cars` is a sparse array, this will always be true. — Barmar, Dec 05 '18 at 20:16
@ChrisG I don't know what's going wrong but i'm trying the same code with changes of input gives me no results — Reh, Dec 05 '18 at 20:21
`the platform i'm using doesn't display the error` If you are running this in a browser, and the error is in your JS code, the browser will show errors in the console — Chris G, Dec 05 '18 at 20:25
@Barmar yeah I do understand there's no need of if ( i in cars) — Reh, Dec 05 '18 at 20:27
@ChrisG Access to fetch at 'https://api.airtable.com/v0/appHXAtvtqG544z0Z/Camel%20Sample/recpzMtGIWOfMVnMz' from origin 'website' has been blocked by CORS policy: Request header field ContentType is not allowed by Access-Control-Allow-Headers in preflight response — Reh, Dec 05 '18 at 20:33
Remove the content-type header in that case: https://jsfiddle.net/khrismuc/u0de4zcg/ — Chris G, Dec 05 '18 at 20:39

multiple ajax call ajax

0 Answers0