Question

I have been trying to figure out how to iterate thru the following code.

var arr = []

$.ajax({

 type: 'POST',
   dataType: 'html', 
   url:   '/test/public/index/getid', 
   success: function(response) {
        response = $.parseJSON(response)
        $.each(response, function(index, value) {
             arr.push(value)

        });
   }

});

console.log(arr)

$.each(arr, function(index0, value0) {

console.log(‘INDEX0: ‘ + value0);

});

This will give me a [ ] on firebug that I can expand. it has then 0 and 1 and shows the ids

[ ]

0 1234343

1 2343223

2 414234

3 232342

But later on program I try to loop thru it with $.each and it won’t read it.

I am trying to have arr when printed thru console.log to look like this.

[“1234343”, “2343223”, “414234”, “232342”]

The values inside are id’s that are pushed on that first loop.

Any idea on how to do this? trying to get arr.length and use it as a testing condition.

RAW JSON RESPONSE:
[“1234343”, “2343223”, “414234”, “232342”]

Answer 1

Ajax is asynchronous, do not attempt to access data from the ajax request outside of it’s success callback.

$.ajax({
   type: 'POST',
   dataType: 'json', 
   url: '/test/public/index/getid', 
   success: function(arr) {
       console.log(arr);
   }
});

You can also do it this way:

var request = $.ajax({
    type: 'POST',
    dataType: 'json', 
    url: '/test/public/index/getid'
});
request.done(function(arr){
    console.log(arr);
});

The second way would allow you to pass request around and use it wherever you need it by simply doing this:

request.done(function(arr){
    // do something with arr
    console.log(arr)
});

Update for comments,

If request 2 depends on request one, use this structure:

var request1 = $.ajax({...});

request1.done(function(){
    var request2  = $.ajax({...});
    request2.done(function(){
        // both are done, do stuff
    });
});

or if you want to send request 1 and 2 and then do something when both are done, you can do this:

var request1 = $.ajax({...});
var request2 = $.ajax({...});
$.when(request1,request2).done(function(req1,req2) {
    // do stuff
});