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
– Jai, Commented Jan 3, 2017 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
– Good Bye Blue sky, Commented Jan 3, 2017 at 10:20

Jai · Accepted Answer · 2017-01-03 10:23:55Z

1

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>

edited Jan 3, 2017 at 10:23

answered Jan 3, 2017 at 10:17

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Guruprasad J Rao Over a year ago

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? :)

Krunal Modi Over a year ago

It is iterating every-time with the each loop. @Me hdi: Please elaborate the requirement.

Jai Over a year ago

@GuruprasadRao may be you are right. for this OP can use index to see if that is index === ides.length-1.

Guruprasad J Rao Over a year ago

@Jai I second you.. :) +1 :)

ricky · Accepted Answer · 2017-01-03 10:23:01Z

0

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

});

answered Jan 3, 2017 at 10:23

ricky

1,6841 gold badge13 silver badges25 bronze badges

1 Comment

Jai Over a year ago

any advantages over two different loops.

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related