Estoy tratando de obtener una sola imagen de cada solicitud de ajax y agregarla a un contenedor de caja li, el primer ajax devuelve una lista de 20 objetos, con nombre y una URL
$.ajax({ url: "http://pokeapi.co/api/v2/pokemon/", dataType: "json", method: "GET", cache: false, success: function(data) { for (var i = 0; i<data.results.length ;i++){ $("#root ul").append('<li class="box"></li>'); $("li").eq(i).append('<h2>' + data.results[i].name +'</h2>'); } setPkmImage(data.results); console.log(data); }, error: function(data) { console.log("Error"); } });El problema comienza cuando trato de hacer una llamada para cada uno de esos objetos para solicitar una imagen, funciona con el async: false, pero no quiero hacerlo de esa manera ya que lleva mucho tiempo cargar todos los imágenes
function setPkmImage(res){ for (var i = 0; i < res.length; i++) { var promise = $.ajax({ url: res[i].url, dataType: "json", method: "GET", cache: false, //async: false, promise.done( function(data) { console.log(data); $("#root ul"); $("li").eq(i).append('<img src="' + data.sprites.front_default+ '"/>'); }); promise.fail( function(data) { console.log("Error"); }); }); } }Estoy tratando de usar promesas pero no sé exactamente cómo estructurarlo.
Dos problemas principales, uno es la sintaxis y el otro es que necesita un ciclo de cierre
Primero, $.ajax no está cerrado correctamente.
Debería parecerse más a:
var promise = $.ajax({ url: res[i].url, dataType: "json", method: "GET", cache: false }); promise.done(... promise.fail(... En cuanto al bucle de cierre, no seré lo i usted quiere que sea dentro de las devoluciones de llamada de ajax porque el bucle for se habrá completado antes de que se devuelvan los datos de las solicitudes. Por lo tanto i estaré al máximo para entonces.
Intente cambiar el bucle for a $.each lo que crea un cierre
$.each(res, function(i, item){ var promise = $.ajax({ url: item.url, dataType: "json", method: "GET", cache: false }); promise.done(... promise.fail(... })Usualmente uso la siguiente solución. Después de realizar la primera solicitud, inserté en dom img con url (la URL proviene de la solicitud) y el navegador cargará las imágenes automáticamente.