How to get multiple ajax request with promises

Question

I'm trying to get a single image from each ajax request and append it to a li box container, the first ajax returns a list of 20 objects, with name and a 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");
  }

});

The problem starts when I try to make a call for each of those objects to request an image, it works with the async: false, but i don't want to do it that way since it takes a lot of time to load all the images.

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");
      });

    });
   }
  }

I'm trying to use promises but I don't know exactly how to structure it

Is the only problem that the images all get put in the last `
they dont even get on the li, it gets an error at the first promise.done — KillerPollo, Apr 13 '17 at 06:23

score 1 · Accepted Answer · answered Apr 13 '17 at 06:26

Two major problems, one is syntax and the other is you need a closure loop

First the $.ajax is not closed properly.

Should look more like:

 var promise = $.ajax({
      url: res[i].url,
      dataType: "json",
      method: "GET",
      cache: false
 });

 promise.done(...
 promise.fail(...

As for the closure loop, i won't be what you want it to be inside the ajax callbacks because the for loop will have been completed before the data for requests is returned. Thus i will be at it's maximum by then

Try changing the for loop to $.each which creates a closure

$.each(res, function(i, item){

       var promise = $.ajax({
          url: item.url,
          dataType: "json",
          method: "GET",
          cache: false
     });

     promise.done(...
     promise.fail(...

})

Thank you, this was what i was looking for, none of the questions I looked at used $.each, I'll look into its documentation to see how it works exactly. — KillerPollo, Apr 13 '17 at 06:38

score 0 · Answer 2 · answered Apr 13 '17 at 06:16

0

I usually use the next solution. After first request is done, I've insert to dom img with url (url is come from request) and browser will load images automatically.

answered Apr 13 '17 at 06:16

Andrey Ravkov

1,268
12
21

the first request gives me [this](http://pokeapi.co/api/v2/pokemon/) array, it doesnt have the images, I need to do another call to get them – KillerPollo Apr 13 '17 at 06:26
ah, sorry. i've not fully understand you problem. – Andrey Ravkov Apr 17 '17 at 12:36

How to get multiple ajax request with promises

2 Answers2