How do I use a jQuery function like $.getJSON() within a normal JS function?

Question

I have a method like this

            var getStatus = function (tr, startTime, endTime) {
                var toReturn ="";
                    $.getJSON('../java_output/bugs.json', function (dataOuter) {
                        //random code here//
                        //code causes changes to 'toReturn'

                    });
                return (toReturn);
            }

Basically, I call getStatus and get a return value, which depends on the getJSON file. However, because it's a callback method, I don't get the current version of toReturn, and instead, get "" as the value because that's how it was initialized.

Use jQuery deferred...

Daniel Conde Marin
– Daniel Conde Marin

2014-08-05 00:04:45 +00:00
Commented Aug 5, 2014 at 0:04 — Daniel Conde Marin
– Daniel Conde Marin, Commented Aug 5, 2014 at 0:04

tymeJV · Accepted Answer · 2014-08-05 00:04:05Z

3

Use a callback!

var getStatus = function (tr, startTime, endTime, callback) {
    var toReturn = "";
    $.getJSON('../java_output/bugs.json', function (dataOuter) {
        //changes..
        callback(toReturn);
    });
}

Then call it!

getStatus(tr, start, end, function(data) {
    //your toReturn value;
    console.log(data);
});

answered Aug 5, 2014 at 0:04

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

2 Comments

StoneMan Over a year ago

Thanks, could you tell me how exactly the callback works? I'm not very familiar with it. I tried to get the value and return it, but when I get the returned value, it still comes up as undefined.

StoneMan Over a year ago

I mean it partially works, but the problem is, I'm using this to add columns to an HTML table. When running this code, instead of adding the column to each row iteratively, it adds EVERY single column to the last row.

Community · Accepted Answer · 2017-05-23 10:33:31Z

This is because $.getJSON is an asynchronous call. I think that you have few choices:

Use a sleep to wait until you get the response, and then return it. This will obviously hang the browser until you get the response or an error. Not a good choice...
Make getStatus an asynchonous function. So let it accept a callback function, and pass it to $.getJSON, or call it inside the callback function passed to $.getJSON.
Use the Deferred Object pattern. jQuery provides it: http://api.jquery.com/category/deferred-object/. Basically you return a "promise" object. The client can attach handlers to this object, to execute code when the promise is "resolved" or "rejected". In the handler function of $.getJSON you can resolve the promise, passing also the response, or reject it in case of error.

See also this question, it's a similar case: Wait Ajax finish to do other function

guest271314 · Accepted Answer · 2014-08-05 01:54:07Z

1

Try

        var getStatus = function (tr, startTime, endTime) {
            toReturn = new $.Deferred();
            $.getJSON("../java_output/bugs.json"
            , function (dataOuter) {
                //random code here//
                //code causes changes to 'toReturn'

                toReturn.resolve(dataOuter);
            });
            return toReturn.promise();
        };
        $.when(getStatus())
            .done(function (_toReturn) {
            // do stuff with `_toReturn` 
            console.log(_toReturn);
        });

jsfiddle http://jsfiddle.net/guest271314/355Pw/

answered Aug 5, 2014 at 1:54

guest271314

1

Collectives™ on Stack Overflow

How do I use a jQuery function like $.getJSON() within a normal JS function?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related