Pushing to an array out of jQuery each loop and jQuery ajax call

Question

I want loop a array if is result, push this result into a javascript array and i get it out of each loop and ajax call. How is it?

I tried to like this:

var ides = ["2254365", "2255017", "2254288", "2220745", "2254452", "2255239", "2232426", "2255143", "2248513", "2254295", "2233629", "2238651", "2254901", "2238430", "2239471", "2255294", "2217888", "2242302", "2242310", "2220380", "56121236", "2255244", "2235716", "2246897"];
var iArray = [];
$.each(ides, function(index, woide) {
    $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20=%20" + woide + "&format=json",
        dataType: 'json',
        success: function(data) {
            if (data.query.results != null) {
                iArray.push(woide+': '+data.query.results.channel.item.condition.code);
            }
        }
    })
})
console.log(iArray); //this don't work

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Because that runs at just after the each loop ends. It does not wait for ajax calls completion. — Jai, Jan 03 '17 at 10:15
AJAX is an asynchronous call, so when you execute code outside the success/errors callback it might not have finished yet. — Good Bye Blue sky, Jan 03 '17 at 10:20

Jai · Accepted Answer · 2017-01-03T10:23:55.440

Your ajax calls are asynchronous so it would take some time to fill the array of your choice. But before ajax completes and each loop finished with its iterations your log call fires.

At this point ajax is still is in process.

You have to move the log inside success handler of the ajax:

var ides = ["2254365", "2255017", "2254288", "2220745", "2254452", "2255239", "2232426", "2255143", "2248513", "2254295", "2233629", "2238651", "2254901", "2238430", "2239471", "2255294", "2217888", "2242302", "2242310", "2220380", "56121236", "2255244", "2235716", "2246897"];
var iArray = [];
$.each(ides, function(index, woide) {
  $.ajax({
    url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20=%20" + woide + "&format=json",
    dataType: 'json',
    success: function(data) {
      if (data.query.results != null) {
        iArray.push(woide + ': ' + data.query.results.channel.item.condition.code);
      }

      if (index === ides.length - 1) {
        console.log(JSON.stringify(iArray, 0, 0)); // <-----move it here.
      }
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

May be OP wants to print it only once after all the values are pushed. Why not use a flag to see if the `push` is complete and then print? :) — Guruprasad J Rao, Jan 03 '17 at 10:20
It is iterating every-time with the each loop. @Me hdi: Please elaborate the requirement. — Krunal, Jan 03 '17 at 10:20
@GuruprasadRao may be you are right. for this OP can use index to see if that is `index === ides.length-1`. — Jai, Jan 03 '17 at 10:25

score 0 · Answer 2 · answered Jan 03 '17 at 10:23

Try to store promises returned by the Ajax call then later you call in separate loop

var ides = ["2254365", "2255017", "2254288", "2220745", "2254452", "2255239", "2232426", "2255143", "2248513", "2254295", "2233629", "2238651", "2254901", "2238430", "2239471", "2255294", "2217888", "2242302", "2242310", "2220380", "56121236", "2255244", "2235716", "2246897"];
var pArray = [];
var iArray = [];
$.each(ides, function(index, woide) {
    var promis = $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20=%20" + woide + "&format=json",
        dataType: 'json',
    });
 
 pArray.push(promis);
})

$.each(pArray, function(index,prom){
 
 prom.done(function(data){
  if (data.query.results != null) {
                iArray.push(data.query.results.channel.item.condition.code);
        }
 });

});

any advantages over two different loops. – Jai Jan 03 '17 at 10:26 — Jai, Jan 03 '17 at 10:26

Pushing to an array out of jQuery each loop and jQuery ajax call

2 Answers2