How to return a variable from a $.getJSON function

Question

My Question is almost identical to this one: How can I return a variable from a $.getJSON function

There are a number of other duplicates on Stack Overflow and I've read through them but yet to find a satisfactory answer.

I'm aware of the fact $.getJSON runs asynchronously, and I've been writing functions like:

function getSharePriceAtDate(date) {
    $.getJSON(queryString, function(data) {
        $("#share-price-at-date").html(data.values[0][date]);
    });
}

Which is fine, and lets me for example, write the data straight from a JSON source into a HTML document (using the callback to ensure the data has been received before it gets written out).

However, this really isn't what I want to do... I want to be able to call getSharePriceAtDate() from other parts of my code.

For example:

function calcChangeInValue(date) {
    var output = currentSharePrice - getSharePriceAtDate(date);
    return output;
}

For this I really need $.getJSON to run synchronously... I need to be able to create a getSharePriceAtDate(date) function that actually functionally does what it says and returns a specific value from a JSON source, rather than being forced to print to HTML within the callback.

The solution suggested in the question I linked was to rewrite $.getJSON() as the function it's shorthand for $.ajax() and set async = false.

This is more like what I want, but Chrome console gives the following warning:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

In my case, I am just grabbing 1 value, and having tested it in this instance, it really isn't that detrimental in any way I can see... (it just means my code will hang until the JSON request comes back, but it would have to anyway! asynchronous or otherwise - I still need that data for the calculation).

So I thought async = false must not be an issue in this case but the link in the warning above says:

Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user's experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when the JavaScript global environment is a document environment. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs.

Which seems like it's saying if I use async = false my code won't be future proof.

Stack Overflow is full of people asking how to use $.getJSON() and the answers usually tell them to make use of the callback.

I'd like to know:

1. What is the advantage of $.getJSON() being asynchronous in this context?
2. How can I access external JSON data in a function that returns a value from the JSON? (i.e. How can I have something that lets me call var price = getSharePriceAtDate() and have my code wait while price is found)

EDIT: I already know how to do something like getSharePriceAtDate(calculateChangeInValue); the code I'm writing could really do with being able to print out share prices at given dates quite often, I was hoping for a better way

Answer 1

Question 1: Async allows to you get data from the server without blocking your entire UI.

Question 2: Use a promise pattern

function getSharePriceAtDate(date) {
    //for example, if the price was contained in a JSON response: {price:$1200}
    return $.getJSON(date).then(function(data) { return data.price; });
}

function calcChangeInValue(date1,date2) {
  return $.when(getSharePriceAtDate(date2),getSharePriceAtDate(date1)
   .then(function(price2,price1) {
      return price2-price1;
   });

}

calcChangeInValue(date1,date2)
 .then(function(change) {
   $(element).html(change);
 });

And, for the record, this is also a duplicate of all those other questions on the site about how to return a value from an AJAX call.

Answer 2

You'll want to save the async responses somewhere and only do the calculations once both json files have arrived. But as Adam says, it's probably better to use promises if you can use them.

Answer 3

All $.ajax in jquery returns a promise, or deferred. You can control with when() if all asynchronous tasks are completed and act in consecuence.

https://api.jquery.com/category/deferred-object/

https://api.jquery.com/promise/

https://api.jquery.com/jquery.when/

Answer 4

The short answer here is: No. You can't.

Longer answer: Look, this is the way Javascript works (and event-driven code in general, for that matter).

You shouldn't write purely linear code in an event-driven environment; it simply doesn't make sense and will lead to problems further down the line. Stop trying to work out how to do it your way, and learn to accept the way of doing things that the platform expects.

Don't try to pass the return value back; instead pass the rest of the code that will use that value into the initial call as an argument.

So you're hoping to write code that looks like this...

var output = calcChangeInValue(date1, date2);
//code that does something with output...

Instead, do this:

calcChangeInValue(date1, date2, function(output) {
    //code that does something with output.
});

The code that does something with output will run just the way you want it to -- ie immediately after the request returns. The difference is that the rest of your system will also continue working while the request is in progress.