Question

I have a problem with returning data from ajax to caller function. When I’m console.logging it out it’s undefined.

I believe my problem occurs due the fact that js is asynchronous, and when I’m console.logging the data out it’s not ready yet. What can I do to solve it?

FooFunction: function(userInput){

    var fooData = FooFunction2(userInput);
    console.log(fooData);     // <--- undefined
},

FooFunction2: function(userInput) {

    $.ajax({
         url:'./php/test.php',
         type:'post',
         dataType:'json',
         data:{ 
             fooData: userInput
         },
         success:function(data) {
             ...manipulating the data...

             console.log(manipulatedData);    // <--- ['foo', 'foo2'];
             return manipulatedData;
         }
    });
},

Answer 1

The ajax call is asynchronous, so returning will not work. Change your code to use a callback that is invoked when the ajax call has completed.

I changed your code to do that:

FooFunction: function(userInput){
    var callbackfunc = function(ajaxData)
    {
        console.log(ajaxData); //ajax is complete!
    };

    this.FooFunction2(userInput, callbackfunc);
},

FooFunction2: function(userInput, callbackfunc) {

    $.ajax({
         url:'./php/test.php',
         type:'post',
         dataType:'json',
         data:{ 
             fooData: userInput
         },
         success:function(data) {
             ...manipulating the data...

             console.log(manipulatedData);    // <--- ['foo', 'foo2'];
             callbackfunc(manipulatedData);
         }
    });
},