Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 504
ecu Avatar asked Feb 03 '10 20:02

ecu


People also ask

How do I return data after ajax call success?

You can store your promise, you can pass it around, you can use it as an argument in function calls and you can return it from functions, but when you finally want to use your data that is returned by the AJAX call, you have to do it like this: promise. success(function (data) { alert(data); });

How can I get success response in ajax?

In most cases, you will need to specify the success and error callbacks. The success callback will be called after the successful completion of the AJAX call. The response returned by the server will be passed along to the success callback.

What is success in jquery ajax?

AJAX success is a global event. Global events are triggered on the document to call any handlers who may be listening. The ajaxSuccess event is only called if the request is successful. It is essentially a type function that's called when a request proceeds.


2 Answers

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);
});
like image 118
David Hellsing Avatar answered Oct 07 '22 12:10

David Hellsing


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);    
});
like image 41
TheRealJAG Avatar answered Oct 07 '22 12:10

TheRealJAG