How to store data of complex types for use in Javascript?

Question

This is a reoccurring theme: either AJAX causes data to be requested from the server and then the data is shown to the user or the page is pre-populated (ie. rendered) with data that has some kind of interaction with Javascript.

Here are couple of possibilities I see how to store and manipulate the (complex) data:

• Store the data simply in the DOM and use Javascript to fetch-from-DOM, do something with the data and manipulate the DOM accordingly to show the results. Fetching and storing the data (multiple hidden fields) can be a real mess and multiple selectors can be slow compared to getting the data from Javascript. In the pre-populate scenarios the benefits are that the data is indexable/crawable by search engine spiders and the page works without Javascript enabled (it gracefully degrades).

• Use Javascript as a container for holding the data and use DOM only to visualize the data. When some action is triggered, the only things fetched from the DOM is something like the entity's ID so we know to which object we are referring to in Javascript. But how is the pre-populated data pushed to Javascript? If we simply render them to DOM, we are back to fetch-from-DOM scenario. We could render the JSON string to the page's <script> tags and then populate the DOM (but this might have problems with caching?). Or we could request the data lazily using AJAX (but this causes unnecessary server load).

• Use a ready made container, like some jQuery table plugin (jqGrid). But it's not possible always to use such a plugin because great deal of customization is needed or the component is simply an overkill for your scenario.

• Also, do you tend to render as much as possible on the server (using RenderPartial) side and return possibly both, the data along with their rendered HTML/Javascript?

I've tried searching for articles about this topic without much of success. Any direction, advice and pointers are welcome.

Answer 1

check out extjs data stores like JSONStore

Answer 2

My (current) approach is to keep the JavaScript as minimal as possible. Obviously, it is also appropriate to have only one place that handles the layout of content. Thus, I tend to have the layout rendered as it needs to be for the given place it is to be used. So yes, the Render method will then render everything appropriately (not only raw data, i.e. some JSON string or what-have-you). This, for me, has advantages as it is then generally trivial to implement an 'non-JavaScript' scenario, where the content is not loaded via Ajax but simply as embedded content on some other page.

However, this is just my approach. It's not neccessarily the best way, and may be subject to change. I hope it gives some indication into the decision making process than can be used to arrive at a specific model.

Answer 3

Javascript by default is an incredibly powerful dynamic language. Storing complex object as variables in Javascript in not an issue. Take for example:

var o = [new Object({ name: 'Test1', value: 1 }), 
         new Object({ name: 'Test2', value: 2 })];
alert(o[0].name) // Returns Test1 as a string

Adding to or removing objects from the array by Ajax calls returning JSON objects is one relatively easy way. I don't see a reason to store more then just an ID in the DOM to lookup values in Javascript, regardless of how fast a DOM engine is in a browser it more elegant to store them in Javascript.

Answer 4

you can also use jQuery.data

jQuery.data( element, key, value )

element : The DOM element to associate with the data.

key : A string naming the piece of data to set.

value : The new data value.