calling jquery ajax function if static data not exists in localstorage

Question

I am trying to write a code which can determine if static data exists in localstorage than dont call ajax method to get data from server otherwise it should call ajax api and store the result in localstorage and return the data to its calling method.

here is my code:

staticService = function (key) {
       return $.ajax({
            type: 'GET',
            url: "xxxxx.ashx/" + key,
            dataType: "json",
            success: function(result){
               store.save(key, result);
            }
        });
    }

var getFromStore = function (key)
{
    if (key) {
        var result = store.fetch(key);
        if (!result) {
            staticService(key);                 
        }
        return result;
    }
}

var staticdata = {
 gender: [{value:"M",text:"Male"}, {value:"F",text:"Female"}],
 maritalStatus: getFromStore('availableMaritalStatus')

};

Problem: ajax calls are asynch and whenever I pass those keys which are not in store it return null, however it goes for ajax call and stores data in localStorage. I need somthing like

{
check list from store if exists return the list otherwise call ajax, get the list,        store it in localStorage and return to user but without blocking UI
}

How can I accomplish this by changing my code? what is the best practice to do it?

EDIT: how to change staticdata variable logic so that i get staticdata.maritalStatus a valid data instead of null. I am loading static data on application load. If i try calling getFromStore number of times I dont know when will i reciev data from server as this will be invoking numerous susccess callbacks. I want static data to be called when all of the static services returned data successfully.

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Rory McCrossan, Oct 30 '13 at 12:25
You need to pass in a callback function that can run when you get the associated value, rather than use a return at the end of the function. The callback can then be either called with the local value that has been stored, or with the value returned from the ajax call when that is complete. — Reinstate Monica Cellio, Oct 30 '13 at 12:25
but the problem in callback is i dont know for which key the response i received. I have to call a number of api services in one go. — Muhammad Wasim, Oct 30 '13 at 12:30

score 0 · Answer 1 · answered Oct 30 '13 at 12:29

result is null because you cannot return data from async ajax query. The best way is to execute a callback function when the query is ´success´ and passing the return value in arg. like that :

staticService = function (key) {
       return $.ajax({
            type: 'GET',
            url: "xxxxx.ashx/" + key,
            dataType: "json",
            success: function(data) {
               store.save(key, data);
               callbackFunction(data); // Here you can call a callback function that will use your return value
            }
        });
}

I am populating a static lists variable on application load by doing var staticdata = { gender: [keyValue("M", "Male", 1), keyValue("F", "Female")], maritalStatus: getFromStore('availableMaritalStatus') }; how to change this ? i get nothing in 'staticdata.maritalStatus' @Archer — Muhammad Wasim, Oct 30 '13 at 12:42

calling jquery ajax function if static data not exists in localstorage

1 Answers1