I'm trying to read in several urls as text and store them into an array with jquery's ajax/get. I need to wait for all data to be obtained (and pushed to an array) and then return it in a function. From what I read online, this isn't possible.

I figured if I set a global array variable and pushed into that every time new data is obtained, then checked using a while loop if the array is saturated, when it is return. See below

You can assume all errors are handled within the get call

function fetchData(){
   x = [1,2,3,4,5,6,7,8,9,10];
   a = [];

   //Loop, get and push data
   $.each(x, function( i, val ) {
       $.get("http://someurl/"+i, function( data ) {
           a.push(data);
       });
   });

   // Wait till our array is populated?
   while(a.length < x.length){
       console.log(a.length);
   }
   return a;
}

However, this approach does not seem to be working and nothing is ever added to the array.. Can someone point me in the right direction?

Thank you

I'm trying to read in several urls as text and store them into an array with jquery's ajax/get. I need to wait for all data to be obtained (and pushed to an array) and then return it in a function. From what I read online, this isn't possible.

I figured if I set a global array variable and pushed into that every time new data is obtained, then checked using a while loop if the array is saturated, when it is return. See below

You can assume all errors are handled within the get call

function fetchData(){
   x = [1,2,3,4,5,6,7,8,9,10];
   a = [];

   //Loop, get and push data
   $.each(x, function( i, val ) {
       $.get("http://someurl/"+i, function( data ) {
           a.push(data);
       });
   });

   // Wait till our array is populated?
   while(a.length < x.length){
       console.log(a.length);
   }
   return a;
}

However, this approach does not seem to be working and nothing is ever added to the array.. Can someone point me in the right direction?

Thank you

• javascript
• jquery
• ajax
• arrays
• get

Share Improve this question Follow asked Nov 21, 2013 at 4:06 Omar WagihOmar Wagih 8,74477 gold badges6565 silver badges7575 bronze badges 3

• trying to return a value from a async function is a very bad idea... instead why don't make use a callback mechanism – Arun P Johny Commented Nov 21, 2013 at 4:09
• possible duplicate of Return value from callback function – Dagg Nabbit Commented Nov 21, 2013 at 4:12
• possible duplicate of How to return the response from an AJAX call? and Javascript callback for multiple ajax calls – Felix Kling Commented Nov 21, 2013 at 8:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The solution you are looking for is to use a callback

function fetchData(callback) {
    var requests = [];
    for (var i = 1; i <= 10; i++) {
        requests.push($.get("http://someurl/" + i))
    }

    $.when.apply($, requests).then(function () {
        var array = $.map(arguments, function (arg) {
            return arg[0];
        });
        callback(array);
    })
}

fetchData(function (array) {
    //do something with array
})

PoC: Fiddle

issue 1

Here you are doing console.log on the result array even before the callbacks get fired. So the array a will always be empty. What you want to do is to trigger the console.log after all the values in array x are processed.

issue 2

You are trying to return the result array back. Instead you should try getting the code that processes a inside the callback.

like

function fetchData(cb){
   x = [1,2,3,4,5,6,7,8,9,10];
   a = [];

   //Loop, get and push data
   $.each(x, function( i, val ) {
       $.get("http://someurl/"+i, function( data ) {
           a.push(data);
           
           if(a.length == x.length) {
                //looping logic taken inside callback
                while(a.length < x.length){
                   console.log(a.length);
                   
               }
               //calling the callback on result
               cb(a);
           }
           
       });
   });  
   
}

fetchData(function(data){

    //process a here

});

In this way you can't make sure ajax calls will be done synchronously. To do so you can do a normal ajax call or you can use ajaxSetup.

In those ways you can make sure array will be read after all calls been processed. You better to have a timeout too, because some call may not return in time.