[jQuery] Re: better way to access JSON than with $.getJSON on each button press

[Scott Sauyet]

On Nov 10, 11:11 am, roryreiff <roryre...@gmail.com> wrote:
> Given the following function, it seems like there would be a better
> way to handle accessing the JSON file each time a link is pressed than
> doing a $.getJSON each time. Is there a prescribed way for storing
> that JSON after the first call and being able to access it later?

There is no prescribed way.  One (untested) possibility would be to
store it inside a closure:

    var getData = (function() {
        var storedData;
        return function(callback) {
            if (storedData) callback(storedData)
            else $.getJSON("/dev/home/pp.json", function(data) {
                storedData = data;
                callback(storedData);
            });
        };
    })();

Then use it like this:

    getData(function(data) {
        $('.pomonaPeople').css('background', 'url(' + data.items
[0].background + ' )' );
        $('.pomonaPeople').append(data.items[0].content);
        $('.pomonaPeople .loading').fadeOut(FADE);
    });

    var ppButton = $('#pp-nav ul li a');
    ppButton.click( function(event) {
        event.preventDefault();
        var aIndex = $(this).attr('href');
        var destination = $('.pomonaPeople');
        destination.append('<div class="loading"></div>');
        getData(function(data){
            destination.css('background', 'url(' + data.items
[aIndex].background + ' )' );
            destination.find('.loading').fadeOut(FADE);
        });
    });

This turns code you might like to be synchronous into asynchronous
code, but other than that I think would do what you want.

There would be something to be said for making this a little more
generic so that you would generate a similar function for each JSON
url you want to use.  That's left as an exercise for the reader.

Cheers,

  -- Scott