Best practices for storing JSON in the DOM

Question

I want to make some json data using an HTML template.

I have not started embedding anything yet, but I would like to be able to "set" data values ​​from json to an html element that contains a template for one record, or to render some collection of elements using some argument that template html for each element , but also the ability to return a JSON object in the same format as the original JSON that was used to render the element (I want my original JSON to contain additional information about the behavior of the recording string, without having to do ajax so that believe whether the user can or cannot do something with this record, and not all this information is visible in the template).

I know that I could make a hidden form with an input element for each property of the object to be stored, as well as a mapper function to / from JSON, but this sounds like redundant to me and I don't like it, I want some easier "the envelope".

I was wondering if there is some kind of JS library that can “serialize” and “deserialize” JSON objects in html so that I can store it somewhere in the DOM (i.e. in an element that contains the data display, but I want to be able to store additional attributes that should not be displayed as form elements)?

UPDATE . Since the first answer suggested storing JSON in a global variable, I also thought about it, and my "best" mental decision was to make a JavaScript module (or jQuery plugin) that would perform a "mapping" from JSON to html, and if not possible to store values ​​in html, then it can store them in an internal variable, so when I want to "get" data from an html element, it can pull it from its local copy. I want to know if there is a better way for this? If there is some library , which stores this information in a variable, but in re Since I have "linked" this data with html since then, I would be very pleased with it.

UPDATE 2 Now this is done using http://knockoutjs.com/ , no need to keep json in the DOM anymore, knockout does JSON <=> HTML auto display

Answer 1

Why not save it as intended nature: as a javascript object? DOM is a terrible place.

However, jQuery has a data method that allows just that.

Answer 2

So you want to keep a reference to the JSON data that created your DOMFragment from the template?

Let's say you have a template function that takes a template and data and returns a DOM node.

var node = template(tmpl, json); node.dataset.origJson = json; node.dataset.templateName = tmpl.name; 

You can save the original json in the node dataset. You might need a dataset strip.

There is also no way to "match" JSON to HTML without using a template engine. Even then you will need to save the template name in json data (as metadata), and it seems to me ugly.

Answer 3

I have done this in the past and in different ways.

The idea of $('selector').data is probably one of the most useful methods. I like this way of storing data because I can store data in a logical, intuitive and orderly way.

Let's say you have an ajax call that retrieves 3 articles when the page loads. Articles may contain data related to the title, date / time, source, etc. Suppose you want to show headings and when the headline lights up, you want to show the full article and its data.

To illustrate the concept a bit, let's say we get json that looks something like this:

 { articles: [ { headline: 'headline 1 text', article: 'article 1 text ...', source: 'source of the article, where it came from', date: 'date of the article' }, { headline: 'headline 2 text', article: 'article 2 text ...', source: 'source of the article, where it came from', date: 'date of the article' }, { headline: 'headline 3 text', article: 'article 3 text ...', source: 'source of the article, where it came from', date: 'date of the article' } ] } 

From such a call ajax.,.

 $.ajax({ url: "news/getArticles", data: { count: 3, filter: "popular" }, success: function(data){ // check for successful data call if(data.success) { // iterate the retrieved data for(var i = 0; i < data.articles.length; i++) { var article = data.articles[i]; // create the headline link with the text on the headline var $headline = $('<a class="headline">' + article.headline + '</a>'); // assign the data for this article headline to the `data` property // of the new headline link $headline.data.article = article; // add a click event to the headline link $headline.click(function() { var article = $(this).data.article; // do something with this article data }); // add the headline to the page $('#headlines').append($headline); } } else { console.error('getHeadlines failed: ', data); } } }); 

The idea is that we can store the associated data with the dom element and receive / manipulate / delete this data later, when necessary. This reduces the potential for additional data calls and effectively caches data to a specific dom element.

at any time after adding a title to the document, the data can be accessed through the jquery selector. To access article data for the first heading:

 $('#headlines .headline:first()').data.article.headline $('#headlines .headline:first()').data.article.article $('#headlines .headline:first()').data.article.source $('#headlines .headline:first()').data.article.date 

Accessing your data through a selector and jquery object is sorted neatly.

Answer 4

I don't think there are libraries that store json in dom.

You can display html using data from json and save a copy of this json variable as a global variable in javascript.