Return statement not working inside Jquery get method

Question

I have a function that finds the name of the user from the database, according to the input userID. But I am facing difficulty in returning the name.

function getName(userID){
     var user = { "username" : userID};
     var name;
     $.get("/getName",user,function(data,status){
         console.log(data);  //prints correct result
         return data;        //but returns undefined
     });
}

The returned value is always undefined. The calling function looks like this :

function init(){
     myid = "james123";
     myname = getName(myid);
     console.log(myname);     //always prints undefined
}

If I try to save the data received from the database in a variable, and return it later, like :

function getName(userID){
      var user = { "username" : userID};
      var name;
      $.get("/getName",user,function(data,status){
          console.log(data);
          name = data;
      });
      return name;
  }

This also doesn't work and I know because it is asynchronous. Any way to make this return work?

return `$.get` as well: `return $.get(...)`. You will get a promise, i guess, you can handle it inside `then` and `catch` blocks. — P.S., Jul 09 '18 at 16:17

Giannis Mp · Answer 1 · 2018-07-09T16:40:47.957

1

The $.get is executed asynchronously so it needs a callback. You can do it like this:

function getName(userID, callback){
     var user = { "username" : userID};
     var name;
     $.get("/getName",user,function(data,status){
         console.log(data);  //prints correct result
         callback(data);        //but returns undefined
     });
}

and then:

function init(){
     myid = "james123";
     getName(myid, function(myname){
         console.log(myname); 
     });
}

Or with Promises you can:

function getName(userID){
     var user = { "username" : userID};
     var name;
     return new Promise(function(resolve, reject) {
         $.get("/getName",user,function(data,status){
             resolve(data);  //prints correct result
         });
     }
}

and then:

function init(){
     myid = "james123";
     getName(myid).then((myname)=>console.log(myname);
}

and with async:

async function init(){
     myid = "james123";
     myname = await getName(myid);
     console.log(myname);
}

edited Jul 09 '18 at 16:40

answered Jul 09 '18 at 16:20

Giannis Mp

1,291
6
13

I'm not familiar with requests via jQuery, can't we just return this call and handle further, without callback? – P.S. Jul 09 '18 at 16:22
Yes, it did work but is there any easier and beautiful way? Thanks a lot – Pushpendu Ghosh Jul 09 '18 at 16:27
@CommercialSuicide the code returns before the get has completed, so what is returned is a promise ie something that will eventually do something but hasn't yet, you can either wait for the promise to complete or you can set a callback inside the function that will be called at the appropriate point, either way you'll be using a callback of some variety – MikeT Jul 09 '18 at 16:29
@MikeTm that's right, thanks for clarification. As i thought, it's possible as in other cases without jQuery – P.S. Jul 09 '18 at 16:35
Check my edited answer – Giannis Mp Jul 09 '18 at 16:41
Its great...thank you sir. – Pushpendu Ghosh Jul 09 '18 at 17:28
you are welcome – Giannis Mp Jul 09 '18 at 17:28

score 0 · Answer 2 · edited Jul 09 '18 at 16:40

0

You can used the lower level ajax method as this allows you to customise more of the settings for the call than the higher level get does

One of the settings lets you disable the async call i.e. force your code to stop and wait for the get to complete before continuing this looks like async: false and is used like this:

function getName(userId) {
   var user = { "username" : userID};
   var name;
   $.ajax({
      url: "/getName",
      data: user,
      type: "GET",
      async: false,
      success: function (data) {
          name = data;
      },
   });
   return name;
}

edited Jul 09 '18 at 16:40

MikeT

5,398
3
27
43

answered Jul 09 '18 at 16:34

AitorFDK

101
6

1

your answer is a little confused as you aren't explaining that the ajax function allows for greater configuration of the command or that the only thing actually important there is the `async: false` – MikeT Jul 09 '18 at 16:36
Thanks for the edit @MikeT, I need more practice answering on StackOverflow. – AitorFDK Jul 09 '18 at 16:42

Return statement not working inside Jquery get method

2 Answers2