How to call Ajax within an Each loop without Async:false Jquery

Question

I have the following HTML structure and I would like to fill each block with an Ajax call but when I use async:false it doesn't work in Jquery 3x

<ul class="tray" id="hiphop"></ul>
<ul class="tray" id="rnb"></ul>
<ul class="tray" id="afro"></ul>
<ul class="tray" id="blues"></ul>
<ul class="tray" id="dancehall"></ul>
<ul class="tray" id="rumba"></ul>
<ul class="tray" id="samba"></ul>
<ul class="tray" id="trap"></ul>
<ul class="tray" id="rap"></ul>

What I want to perform is this:

browse the HTML structure and retrieve all the IDs
send a request to my server file for each ID and
display the result obtained according to the ID of each block

Here is my initial JS code:

$('.tray').each(function(){
    $id = $(this).attr('id');
    $.ajax({
        type: 'GET',
        url: 'feed',
        data: 'c='+$id,
        cache: false,
        // async: false, 
        success:function(datas){
            $('#'+$id+'').html(datas);=
        },
        error:function (){
            console.log('error ...');
        }
    });
});

but after reading about something called Promise, I tried this but to be honnest, I don't even understand what I'm doing

var $array = $.map($('ul.tray'), function(value, index) {
    return [value];
});

var promises = [];
$array.forEach(function(item) {
    // you can access item.id and item.title here
    $id = $(this).attr('id');
    promises.push(
        $.ajax({
            type: 'GET',
            url: 'feed',
            data: 'c='+$id,
            cache: false,
        })
    );
});
Promise.all(promises).then(function(results) {
    // all ajax calls done here, results is an array of responses
    //console.log($results);
});

Can you please help me to fill those empty blocks with Ajax without using async? Any help will be appreciated

Rory McCrossan · Accepted Answer · 2020-07-20 17:06:43Z

1

Use the let keyword to define a block-scoped reference to the element in the loop so that it's retained within the callback of the AJAX request. Try this:

$('.tray').each(function() {
  let $tray = $(this);

  $.ajax({
    type: 'GET',
    url: 'feed',
    data: 'c=' + this.id,
    cache: false,
    success: function(datas) {
      $tray.html(datas);
    },
    error: function() {
      console.log('error...');
    }
  });
});

However it's worth noting that making AJAX requests in a loop is not good practice as it will be flooding your server with requests very quickly, and will not scale with concurrent site visits. A far better approach is to make a single AJAX request which gets data for all .tray elements and updates them in one go.

answered Jul 20, 2020 at 17:06

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lunar Over a year ago

Thank you @Rory for your answer it works very well. Also, I can go with your approach if you tell me how to do

Collectives™ on Stack Overflow

How to call Ajax within an Each loop without Async:false Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related