JQUERY foreach appending PHP script out of order

Question

I have this ajax function that loads a php script for each item in an array and then appends it to an html tag. The issue is that the scripts are appending out of order. How do I preserve the order of the objects?

jQuery(function($) {
  $.getJSON('apiUrl.com', function(response) {
    $.each(response.data, function(key, val) {
      $.get("phpFile.php", {
        id: val.id,
        title: val.title,
        img_url: val.images.jpg.image_url
      }, function(html) {
        $("#elementToLoadPhpFile").append(html);
      });
    });
  });
});

"Out of order" implies some sort of sort order? The response will always be however the data was formed from the server. So, what is the "sort order" you desire? What is your server-side code returning in terms of "sort order"? — mardubbles
– mardubbles, Commented Apr 3, 2022 at 20:31
Ahh, this is AJAX so client side may not render in same order you prefer, due to the 2nd ajax call. I see now. — mardubbles
– mardubbles, Commented Apr 3, 2022 at 20:32

Emiel Zuurbier · Accepted Answer · 2022-04-04 09:15:07Z

All of your $.get requests are being called in parallel. This results in a race condition where the order is not maintained. Think of it as first come, first served.

To preserve the order wrap each request in a Promise and collect all these promises in a single array. Pass the array to Promise.all to wait for all requests to finish.

Whenever all requests are done you'll get an array which has the same order in which all requests are made. Loop over this array to append the values of each request to the page.

jQuery(function($) {
  $.getJSON('apiUrl.com', function(response) {
    const requests = response.data.map(val => new Promise((resolve, reject) => {
      $.get("phpFile.php", {
        id: val.id,
        title: val.title,
        img_url: val.images.jpg.image_url
      })
      .done(html => resolve(html))
      .fail((xhr, textStatus, errorThrown) => reject(errorThrown));
    }));

    Promise.all(requests).then(responses => {
      responses.forEach(html => {
        $("#elementToLoadPhpFile").append(html);
      });
    });
  });
});

Collectives™ on Stack Overflow

JQUERY foreach appending PHP script out of order

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related