Cache large volume of json result on client side

Question

I\'ve a asp.net mvc application which returns the JSON result containing upto n number of years worth of data which then gets rendered on Javascript chart.

In order to h

Answer 1

I have done what you are trying to do and here is my experience. I use Oracle's Site Studio middleware at work. I looked for a framework that would work with it but couldn't find one. So I have tried both options below.

1) The database query returns a certain amount of rows. I tried 2,000 as a test. A simple foreach loop converts the returned data into JSON data. So it literally builds up a long array of JSON variables as it loops through rows. In this way you are mimicking a snapshot of a local dababase. JS can actually access the array elements very quickly and it might surprise you how fast you can sort, alter, delete information.

This JSON data is contained within a script tag. JQuery on doc.ready then reads the data and adds it to the html text as needed. When a user changes the JSON data value ajax fires off and saves the changes to the database. It is not too difficult to add a system like this to your application. I used Google's Angular.js later to bind data to the UI to have a clean MV pattern and it is also easy to do fast client side sorts and filtering. As already mentioned Backbone.js and other JS frameworks can synchronize client data to server.

2) The second way I saved data to an html page is to once again loop through the returned rows with a foreach. Then I saved the data in the HTML using old fashioned

I then used JQuery to process the data and add it to the UI. If you really want to get wild with JSON you can actually embed it in HTML variables like so

You can then use JQuery or Angular.js to process the data and bind it to your UI.

It is interesting that a lot of application frameworks don't have a built in client side caching system. It really is inefficient to sort a select menu on the server side and then rebuild the html. Better to sort it in JS and dynamically rebuild the select menu. There is a concern with security here and you wouldn't want to print private information into JSON or HTML variables since it is visible under view source. Also you can embed data in pages using more rogue techniques. Consider below:

$(function () { 
    $('.data').each( function() {
        var val = $(this).attr('value');
        console.log(val); //process data
    });
});

You can then use JQuery on doc.ready to process classes named data. You can also stuff JSON data into the value and parse it out later. Keep in mind the JQuery folks are against developers using classes in this way. In my experience if you don't go overboard with it it works great.