CODEWITHSUNDEEP
javascriptjqueryarraysajax
Me hdi
Me hdi

Reputation: 1912

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

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>

Upvotes: 1

Views: 2105

Answers (2)

Jai
Jai

Reputation: 74738

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>

Upvotes: 1

ricky
ricky

Reputation: 1674

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

});

Upvotes: 0

Related Questions