better way to access JSON than with $.getJSON on each button press

[roryreiff]

Hi,

I have created a function that binds behavior to a set of links, the
result of clicking being that the container div of the navigations
gets a new background image, and eventually gets html injected into
the div as well (currently that part is not coded)...

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? Or,
could I set up variables each time the particular part of the JSON
file is called and if that same button is clicked again, return the
variable instead of accessing the JSON? Thanks for the help,

$.getJSON("/dev/home/pp.json",
        function(data){
                $('.pomonaPeople').css('background', 'url(' + data.items
[0].background + ' )' );
                $('.pomonaPeople').append(data.items[0].content);
                $('.pomonaPeople .loading').fadeOut(FADE);
        });
        // create navigation
        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>');
                $.getJSON("/dev/home/pp.json",
                        function(data){
                        destination.css('background', 'url(' + data.items
[aIndex].background + ' )' );
                        destination.find('.loading').fadeOut(FADE);
                });
        });

[Scott Sauyet-2]

On Nov 10, 11:11 am, roryreiff <roryre...@...> 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

[Scott Sauyet-2]

On Nov 10, 1:08 pm, Scott Sauyet <scott.sau...@...> wrote:
> 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.

Or for me!  :-)  This simply makes more sense:

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

    ppData(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>');
        ppData(function(data){
            destination.css('background', 'url(' + data.items
[aIndex].background + ' )' );
            destination.find('.loading').fadeOut(FADE);
        });
    });

Cheers,

  -- Scott

[Scott Sauyet-2]

>     function getData(url) {
>         var storedData;
>         return function(callback) {
>             if (storedData) callback(storedData)
>             else $.getJSON(url, function(data) {
>                 storedData = data;
>                 callback(storedData);
>             });
>         };
>     };

That has the disadvantage that is will make the AJAX call multiple
times if multiple calls come in to the generated function before the
first one completes.  This has the same API, but is cleaner:

    function getData(url) {
        var storedData, callbacks = [];
        $.getJSON(url, function(data) {
            storedData = data;
            for (var i = 0; i < callbacks.length; i++) {
                callbacks[i](data);
            }
        });
        return function(callback) {
            if (storedData) callback(storedData)
            else callbacks.push(callback);
        };
    };

This could easily be extended for multiple re-tries on ajax failure.

But any of these techniques turn what you would like to think of as
synchronous calls into asynchronous ones.  A different technique
avoids making you think about this, although it is equally
asynchronous:  Simply move your click binding inside the
initial .getJSON callback.  "data" will be available, and you won't
have to make additional calls.  The biggest disadvantage of this is
that the default action will happen on your links if they're clicked
before the ajax call returns.

Anyway, here's a few ideas.

  -- Scott

[roryreiff]

Thanks Scott...you have given me some food for thought.

On Nov 12, 9:18 am, Scott Sauyet <scott.sau...@...> wrote:

> >     function getData(url) {
> >         var storedData;
> >         return function(callback) {
> >             if (storedData) callback(storedData)
> >             else $.getJSON(url, function(data) {
> >                 storedData = data;
> >                 callback(storedData);
> >             });
> >         };
> >     };
>
> That has the disadvantage that is will make the AJAX call multiple
> times if multiple calls come in to the generated function before the
> first one completes.  This has the same API, but is cleaner:
>
>     function getData(url) {
>         var storedData, callbacks = [];
>         $.getJSON(url, function(data) {
>             storedData = data;
>             for (var i = 0; i < callbacks.length; i++) {
>                 callbacks[i](data);
>             }
>         });
>         return function(callback) {
>             if (storedData) callback(storedData)
>             else callbacks.push(callback);
>         };
>     };
>
> This could easily be extended for multiple re-tries on ajax failure.
>
> But any of these techniques turn what you would like to think of as
> synchronous calls into asynchronous ones.  A different technique
> avoids making you think about this, although it is equally
> asynchronous:  Simply move your click binding inside the
> initial .getJSON callback.  "data" will be available, and you won't
> have to make additional calls.  The biggest disadvantage of this is
> that the default action will happen on your links if they're clicked
> before the ajax call returns.
>
> Anyway, here's a few ideas.
>
>   -- Scott

[roryreiff]

Thanks Scott...you have given me some food for thought.

On Nov 12, 9:18 am, Scott Sauyet <scott.sau...@...> wrote:

> >     function getData(url) {
> >         var storedData;
> >         return function(callback) {
> >             if (storedData) callback(storedData)
> >             else $.getJSON(url, function(data) {
> >                 storedData = data;
> >                 callback(storedData);
> >             });
> >         };
> >     };
>
> That has the disadvantage that is will make the AJAX call multiple
> times if multiple calls come in to the generated function before the
> first one completes.  This has the same API, but is cleaner:
>
>     function getData(url) {
>         var storedData, callbacks = [];
>         $.getJSON(url, function(data) {
>             storedData = data;
>             for (var i = 0; i < callbacks.length; i++) {
>                 callbacks[i](data);
>             }
>         });
>         return function(callback) {
>             if (storedData) callback(storedData)
>             else callbacks.push(callback);
>         };
>     };
>
> This could easily be extended for multiple re-tries on ajax failure.
>
> But any of these techniques turn what you would like to think of as
> synchronous calls into asynchronous ones.  A different technique
> avoids making you think about this, although it is equally
> asynchronous:  Simply move your click binding inside the
> initial .getJSON callback.  "data" will be available, and you won't
> have to make additional calls.  The biggest disadvantage of this is
> that the default action will happen on your links if they're clicked
> before the ajax call returns.
>
> Anyway, here's a few ideas.
>
>   -- Scott