使用AJAX返回JSON对象

Question

I'm trying to use AJAX (through jQuery) to return a bit of JSON from an API, and then store that JSON in localStorage as a string. Whenever the function runs, I want it to check localStorage for the key, and return that value if it exists. If it does not exist, then it should contact the API for the object, save it to localStorage, and then return it.

The problem that I'm having is this: the function NEVER returns the JSON object the first time (when it's not stored in localStorage). It has no problem saving it to localStorage, and it always pulls it from localStorage just fine, but even right after using the returned object in the previous line, the function won't return it. The console just says "undefined".

The code I'm using is below (edited slightly since the API is private):

window.get_company = function() {
    var full = window.location.host;
    var parts = full.split('.');
    var subdomain = parts[0];

    if ( localStorage.getItem("company_" + subdomain) === null ) {
        $.getJSON("https://api.testingapp.com/subdomains?name=" + subdomain).then( function(data) {
            localStorage.setItem("company_" + subdomain, JSON.stringify(data));
            return JSON.stringify(data);
        });
    } else {
        return localStorage.getItem("company_" + subdomain);
    }
}

Thanks so much for your help!

Answer 1

Your call to $.getJSON is asynchronous. The return JSON.stringify(data) doesn't happen until later, after your original get_company function has returned. One way to deal with this would be to use promises or callbacks.

For example, using jQuery's Deferred object (promises):

window.get_company = function() {
    var deferred = $.Deferred();
    var full = window.location.host;
    var parts = full.split('.');
    var subdomain = parts[0];

    if ( localStorage.getItem("company_" + subdomain) === null ) {
        $.getJSON("https://api.testingapp.com/subdomains?name=" + subdomain).then(function(data) {
            localStorage.setItem("company_" + subdomain, JSON.stringify(data));
            return deferred.resolve(JSON.stringify(data));
        });
    } else {
        deferred.resolve(localStorage.getItem("company_" + subdomain));
    }

    return deferred;
}

// to use:
window.get_company().then(function(result) {
  // do something with the result
})

Answer 2

In the following link you have some solutions/workarounds:

(Check the SECOND answer, not the accepted one)

Return value for function containing jQuery $.post() function

So, although it's technically possible to make the call synchronous and return the value, it's not recommended. Your method should become async and instead of returning a value, it would call a callback when finished, so you'd have:

window.get_company = function(onSuccess) {
    var full = window.location.host;
    var parts = full.split('.');
    var subdomain = parts[0];

    if ( localStorage.getItem("company_" + subdomain) === null ) {
        $.getJSON("https://api.testingapp.com/subdomains?name=" + subdomain).then( function(data) {
            localStorage.setItem("company_" + subdomain, JSON.stringify(data));
            onSuccess(JSON.stringify(data));
        });
    } else {
        onSuccess(localStorage.getItem("company_" + subdomain));
    }
}

Then, instead of calling like this:

company = window.get_company(); //This fails

You would call

//This works
window.get_company(function(returnValue){
   company = returnValue;
});

That is one way, there are others, like returning a promise

Cheers, from La Paz, Bolivia