Data that's returning from function is undefined

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;
         }
    });
},

from where does it comes and where is defined userInput ?? you are saying nothing with this example, you should check where that var starts — Filippo oretti
– Filippo oretti, Commented Dec 29, 2012 at 14:50

David Müller · Accepted Answer · 2012-12-29 14:40:29Z

2

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);
         }
    });
},

answered Dec 29, 2012 at 14:40

David Müller

5,3612 gold badges32 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anoop · Accepted Answer · 2012-12-29 14:36:38Z

1

FooFunction2 is property of object use this.FooFunction2

and you cant return from asynchronous methods. either make ajax call synch or proivde callback.

FooFunction: function(userInput){

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

Modified Code

FooFunction: function(userInput){

     this.FooFunction2(userInput, function(fooData){
          console.log(fooData);     // <--- undefined
    });

},

FooFunction2: function(userInput, cb) {

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

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

answered Dec 29, 2012 at 14:36

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

1 Comment

Eric Over a year ago

@undefined: Yes, it does. The way to solve not being able to return from an asynchronous function is to use a callback instead.

Collectives™ on Stack Overflow

Data that's returning from function is undefined

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related