AJAX and returns (async related)

Question

My code looks like:

function DBManager() {

    this.getContactsList = function() {
        $.post('/post/getContactsList', function (contacts) {
            return contacts;
        });
    }
}

var DBManager = new DBManager();

console.log(FF_DBManager.getContactsList());

But I get undefined instead of seeing the results from the post's response.

Have you done any research? This is a really basic question. — Artyom Neustroev, Apr 11 '14 at 04:31
Food for thought: you have three functions, which one of them returns `contacts` (when you say `return contacts`)? (Hint: it's not `getContactsList`.) — Amadan, Apr 11 '14 at 04:32
I am continuing my research right now. Haven't found a good way yet. Hopefully the answer could help someone else find an answer quickly later on. — Dan P., Apr 11 '14 at 04:33
There are [dozens](http://stackoverflow.com/questions/4555079/ajax-jquery-async-return-value?rq=1) [of](http://stackoverflow.com/questions/11099004/function-return-async-response?rq=1) [related](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call?rq=1) questions on the right. — Artyom Neustroev, Apr 11 '14 at 04:34
the return value is not returning from getContactList function, Of course that's undefined — imkrisna, Apr 11 '14 at 04:34

score 2 · Answer 1 · answered Apr 11 '14 at 04:54

An example I like to use in these situations.

Synchronous functions work like this. You tell your wife you're going out and you'll do some shopping, hand her a blank piece of paper and tell her to write down the stuff she wants you to buy. You wait till she writes it down, then go to the store.

Asynchronous functions work like this. You tell your wife you're going out and you'll do some shopping, hand her a blank piece of paper, tell her to write down the stuff she wants you to buy, and when she's done, to give you the paper and tell you to go to the store; you'll be awaiting her instructions. Then you forget about it and start reading your evening paper.

Using asynchronous functions without understanding what you do, like you did in the original post, you did something like this. You tell your wife you're going out and you'll do some shopping, hand her a blank piece of paper, tell her to write down the stuff she wants you to buy, and when she's done, to give you the paper and tell you to go to the store. You then immediately go to the store, and get confused when you can't find your wife's paper on you. You go home, and proceed to read the evening paper. Your wife then gives you her list and tries to tell you to go to the store, but you ignore her, thinking your job is done.

That's a nice analogy :) Thanks – Dan P. Apr 11 '14 at 07:14 — Dan P., Apr 11 '14 at 07:14

score 1 · Accepted Answer · answered Apr 11 '14 at 04:32

1

Because the value of contacts avalable only after the ajax call is completed. So you need to do it by a callback function which processes the ajax result. like

function DBManager() {

    this.getContactsList = function(cb) {
        $.post('/post/getContactsList', function (contacts) {
            cb(contacts);
        });
    }
}

FF_DBManager.getContactsList(function(data){

    console.log(data);

});

answered Apr 11 '14 at 04:32

Mithun Satheesh

27,240
14
77
101

Thanks, so I take it having returns in those kind of functions is not optimal? I should have something like `var contacts; DBManager.getContactsList(function (data) { contacts = data; });`? – Dan P. Apr 11 '14 at 04:45

score 0 · Answer 3 · answered Apr 11 '14 at 04:45

When you make the function call, the function in turn makes the ajax request which is basically an async request. At this time the return will be undefined but once the ajax call gets completed, it will return the correct value.

function DBManager() {

    this.getContactsList = function() {
        $.post('/post/getContactsList', function (contacts) {
            console.log(contacts);
            return contacts;
        });
    }
}

var FF_DBManager = new DBManager();

console.log(FF_DBManager.getContactsList());

You can try adding a console.log(contacts); in the callback method to see what is basically returned.

Else if you really want to make use of ajax and wait for the return then you can try for making ajax call synchronous instead of asynchronous

A simple example for $.ajax

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType,
  async:false
});

AJAX and returns (async related)

3 Answers3