Load External JSON once, use it repeatedly....?

Question

When my page loads, I want to immediately pull in JSON data from another server using $.ajax(), and I want to be able to access all the data without having to re-request the json file. The problem is, when I assign the data to a variable, the scope of that variable is confined to the $.ajax() function and I can't access it elsewhere...

It seems like since I have already loaded that information, I should be able to use it as many times as I need too without having to re-request it over and over again (slow). Using simple reddit.json request for example below

$(document).ready(function(){   
    $.ajax({
        type: "GET",
        url: 'https://www.reddit.com/.json',
        timeout:3000,
        dataType: 'JSON',
        jsonpCallback: 'callback',
        success: function(data) {
            console.log(data);
            var myData = data;  //this variable is confined :(
        },
        error: function(){
            console.log('error');
        }
    });
});

If I run it outside of the document.ready(), then I can get to it globally, but I didn't know if that was cool or not, or like best practices, you know...

Whats the best way to access an already-loaded json object outside of the scope of the function that made it's initial request? Or is it even possible...?

As long as you can guarantee that the data is only accessed *after* the Ajax request completes, you can store it wherever you want. E.g. if you need to access the data in event handlers, bind the event handlers only *after* the request completes. — Felix Kling, May 08 '16 at 00:05
If you use a global variable the JSON data can be shared with any caller, intended or not. — , May 08 '16 at 00:06
Related: [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220321) — Felix Kling, May 08 '16 at 00:06
Thanks for the related link @FelixKling, looks like callbacks are the way to go. I think defining the variable globally will be enough to get me up-and-running for now, but I have some reading to do as well... — TJBlackman, May 08 '16 at 00:27

score 0 · Answer 1 · answered May 08 '16 at 00:06

0

Load everything with ajax and then you can write it to file or put it in an global array which can be accessed from everywhere

answered May 08 '16 at 00:06

Aleksandar Đokić

2,118
17
35

score 0 · Accepted Answer · answered May 08 '16 at 00:15

You can use any one of the two options given below.

1.Declare a global variable before $(document).ready() function.Then use it inside like below.

<script>
var myData;
$(document).ready(function(){   
 $.ajax({
    type: "GET",
    url: 'https://www.reddit.com/.json',
    timeout:3000,
    dataType: 'JSON',
    jsonpCallback: 'callback',
    success: function(data) {
        console.log(data);
        myData = data;  //this variable is confined :(
    },
    error: function(){
        console.log('error');
    }
});
});
</script>

2.Place your data in HTML5 session storage or local storage depending on your requirement.Like below.

<script>
$(document).ready(function(){   
 $.ajax({
    type: "GET",
    url: 'https://www.reddit.com/.json',
    timeout:3000,
    dataType: 'JSON',
    jsonpCallback: 'callback',
    success: function(data) {
        console.log(data);
        sessionStorage.myData=data;  //setting variable in session storage
        console.log(sessionStorage.myData); // getting variable from ss
        // for local storage replace sessionStorage with localStorage in above two lines
    },
    error: function(){
        console.log('error');
    }
});
});
</script>

This got my project up and running, but check out the linked post @FelixKling dropped up under my initial question... really good info there. I used method 1 btw... — TJBlackman, May 08 '16 at 00:31

Load External JSON once, use it repeatedly....?

2 Answers2