Tengo esta función ajax que carga un script php para cada elemento de una matriz y luego lo agrega a una etiqueta html. El problema es que los scripts se agregan fuera de servicio. ¿Cómo conservo el orden de los objetos?
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); }); }); }); });Todas sus solicitudes de $.get se llaman en paralelo. Esto da como resultado una condición de carrera en la que no se mantiene el orden. Piense en ello como primero en llegar, primero en ser atendido .
Para preservar el orden, envuelva cada solicitud en una Promise y recopile todas estas promesas en una sola matriz. Pase la matriz a Promise.all para esperar a que finalicen todas las solicitudes.
Siempre que se realicen todas las solicitudes, obtendrá una matriz que tiene el mismo orden en que se realizan todas las solicitudes. Recorra esta matriz para agregar los valores de cada solicitud a la página.
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); }); }); }); });