Best practices for Storing JSON in DOM

Question

I want to render some json data using HTML template.

I haven\'t started implementing anything yet, but I would like to be able to \"set\" values of data from json t

Answer 1

I have done this in the past as well in a couple of different ways.

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

Let's say you have an ajax call that retrieves 3 articles on page load. The articles may contain data relating to the headline, the date/time, the source etc. Let's further assume you want to show the headlines and when a headline is clicked you want to show the full article and its details.

To illustrate the concept a bit let's say we retrieve json looking something like:

{
    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 an ajax call like this . . .

$.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 = $('' + article.headline + '');

                // assign the data for this article's 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 being we can store associated data to a dom element and access/manipulate/delete that data at a later time when needed. This cuts down on possible additional data calls and effectively caches data to a specific dom element.

anytime after the headline link is added to the document the data can be accessed through a jquery selector. To access the article data for the first headline:

$('#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 sorta neat.