Is it bad to add JSON on HTML data attribute?

Question

Since HTML data attribute allows adding any custom data, I wonder if it is a good idea to include a set of JSON list as a data attribute? Then, the corresponding JSON can be easily accessed by JavaScript events with getAttribute("data-x").

In fact, my question is that: Is it standard, efficient, and reasonable to add a large set of data to an HTML attribute?

For example

<div data-x="A LARGE SET OF JSON DATA" id="x"> 

Or a large set of JSON data must be stored within <script> tag, and an HTML attribute is not a right place for a large set of data, even for data attribute.

Answer 1

Instead of storing everything in the data attribute you could use an identifier to access the data.

So for example you could do this :

var myBigJsonObj = {                        data1 : { //lots of data},                        data2 : { //lots of data}                                        }; 

and then you had some html like so :

<div data-dataId="data1" id="x"> 

You can use jquery to get the data now like so :

var dataId = $('#x').attr('data-dataId');  var myData = myBigJsonObj[dataId]; 

This is the best approach imho.

Answer 2

Say you want to save the object var dataObj = { foo: 'something', bar: 'something else' }; to an html data attribute.

Consider first stringifying the object such that we have var stringifiedDataObj = JSON.stringify(dataObj);

Then you can use jQuery to set the stringifiedDataObj as the data attribute e.g. with the jQuery.data() API