JQuery function return statement gets executed first then only the condition inside gets executed

Question

var str ='';
function myFormatter(cellvalue, options, rowObject) {

    if(rowObject.name== 'test'){

        $.getJSON(loadUrl, function(jsnResponse) {

            str=jsnResponse.address;
        }); 
    }else{
        str = 'No value'; 
    }
    return str;
    }

This is a function that i have written,the problem is that when this function is called, it first executes return str line and returns blank and then the if statement is executed and again the correct value is returned.

Any help will be appreciated.Thanks

@FelixKling I'd be interested in finding out which question is the most often linked as a duplicate. I think you might be the winner. http://stackoverflow.com/questions/linked/14220321?lq=1 — user229044, Aug 21 '14 at 05:45
Instead of `str=jsnResponse.address;` use `return str=jsnResponse.address;` and remove last one — Manwal, Aug 21 '14 at 05:45
@meagar: uh wow, that's a lot of questions! Yeah, mine is currently the top one in the list of "frequent" questions. What can I say, people seem to like it :) although I think http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron is doing a better job in explaining what asynchronous means. — Felix Kling, Aug 21 '14 at 05:50

score 2 · Answer 1 · answered Aug 21 '14 at 05:44

2

Try this:

var str ='';
function myFormatter(cellvalue, options, rowObject) {

    if(rowObject.name== 'test'){

        $.getJSON(loadUrl, function(jsnResponse) {

            return str=jsnResponse.address;
        }); 
    }else{
        return str = 'No value'; 
    }
 }

answered Aug 21 '14 at 05:44

Mayank Sharma

844
7
21

This will not work properly. See my answer... – Htmlin.com Aug 21 '14 at 05:47
How could such a wrong answer get so many upvotes? – Felix Kling Aug 21 '14 at 05:56

score 0 · Answer 2 · answered Aug 21 '14 at 05:41

The function is calling a promise. Instead of returning from the function that calls the promise, subscribe to the promise an execute your logic when the promise callback is invoked. You are already populating your variable within the callback, so execute the rest of your logic there:

$.getJSON(loadUrl, function(jsnResponse) {
    str=jsnResponse.address;
    DoStuff(str);
});

score 0 · Accepted Answer · answered Aug 21 '14 at 05:41

This happens because getJSON is asynchronous function. You may use $.ajax with async: false instead of getJSON, like:

$.ajax({
  dataType: "json",
  url: loadUrl,
  async: false,
  success: function(response) { ... }
});

But I would suggest to use callback instead, like:

var str ='';
function myFormatter(cellvalue, options, rowObject, callback) {
if(rowObject.name== 'test'){
        $.getJSON(loadUrl, function(jsnResponse) {
            if(typeof(callback) === 'function'){
                callback(jsnResponse.address);
            }
        }); 
    } else {
        str = 'No value'; 
    }
    return str;
}

And then call it like:

myFormatter('...', '...', rowObject, function(str) {
    // Here you will receive the value asynchronously.
});

Thanks.How can I assign the value returned by this function to a jqgrid column?I want to apply this method as a formatter for jqgrid. — Monika, Aug 21 '14 at 11:45

JQuery function return statement gets executed first then only the condition inside gets executed

3 Answers3