How to return an array from jQuery ajax success function properly? [duplicate]

Question

TheObject = {    
    getArray: function(){
        var groups = new Array;
        $.ajax({
              type: "POST",
              url: "link.php",
              success: function (data){
                  var counter = 0;
                  $('g',data).each(function(){    
                      var group_name = $(this).find("name").text();
                      var group_id = $(this).find("id").text();
                      var group = {
                         id: group_id,
                         name: group_name
                      }
                      groups[counter] = group;
                      counter++;
                  });
                  return groups;
              }
         });
     }

}

And when I try to call this method:

var a = TheObject.getArray();
alert(a);

It returns 'undefined'. I cant figure out where is the problem. The array gets created inside the success function but I'am unable to return it properly. Thanks for your help!

David Hellsing · Accepted Answer · 2010-02-03 20:57:02Z

In your code, you are looking for groups using procedural coding after the ajax call was made. The main problem is that you are looking for groups before the ajax call is complete.

Another problem is that you are returning groups to the success() function, but the TheObject.getArray() function returns nothing.

So you need to bring in the callback into the ajax function like this:

TheObject = {
    getArray: function(callback) {
        var groups = new Array;
        $.ajax({
              type: "POST",
              url: "link.php",
              success: function (data){
                  var counter = 0;
                  $('g',data).each(function(){    
                      var group_name = $(this).find("name").text();
                      var group_id = $(this).find("id").text();
                      var group = {
                         id: group_id,
                         name: group_name
                      }
                      groups[counter] = group;
                      counter++;
                  });
                  callback.call(this,groups);
              }
         });
     }
}

TheObject.getArray(function(a) {
    // this code runs when the ajax call is complete
    alert(a);
});

TheRealJAG · Accepted Answer · 2012-04-12 01:59:39Z

5

A very simple version of David's example.

TheObject = {
    getArray: function(callback) { 
        $.ajax({
              cache: true,
              type: "GET",
              url: "http://www.domain.com/core/domains.php",
              success: function (data){ 
                  callback.call(this,data);
              }
         });
     }
}

TheObject.getArray(function(data) {
    javascript: console.log(data);    
});

answered Apr 12, 2012 at 1:59

TheRealJAG

2,11821 silver badges16 bronze badges

Comments

Teja Kantamneni · Accepted Answer · 2010-02-03 20:28:47Z

0

Use push on the array. Also you want to create a type called Group and then create a new group in the loop and then push it into the array.

answered Feb 3, 2010 at 20:28

Teja Kantamneni

17.5k12 gold badges58 silver badges86 bronze badges

1 Comment

ecu Over a year ago

Please read the question. I don't have a problem with creating the array. The problem is I don't know how to get it outside of the success function.

Collectives™ on Stack Overflow

How to return an array from jQuery ajax success function properly? [duplicate]

3 Answers 3

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Linked

Related