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.

You would be MUCH better off storing the data in a script tag. Storing it in a data-attribute, while technically possible, just seems like bad practice. Buf if you really wanted to, you could. HTML5 specifies no limit for attribute lengths. (You might have to encode it or something though.) — GJK
– GJK, Commented Apr 5, 2013 at 16:12
@GJK: That does depend on the use case: if the JSON object in question is a single global data object then you're probably right; if there are multiple similar objects, each associated with a particular DOM element, then that is exactly the sort of thing that data attributes are intended for, so using them wouldn't necessarily be bad practice at all (storing the whole thing as a string in a single attribute might be, of course, but there's also the option of storing individual properties in different data attributes). — Nick F
– Nick F, Commented Sep 30, 2015 at 13:13
@GJK I don't think it is considered bad practice storing huge data set in a data-attribute. The very reason for creating such a tag is meant for data storage. — Jinghui Niu
– Jinghui Niu, Commented Jun 19, 2017 at 5:55
@GJK Can you elaborate on why you think this is bad practice? — theyuv
– theyuv, Commented Mar 18, 2018 at 9:00
Looking back, I should have clarified that it entirely depends on your use case. If you're injecting data on page load it might be a good idea. But if you're using data attributes to maintain application state you might have state management problems. I personally would avoid putting large amounts of data in an attribute, but I would at least encourage people to think if that's a good place to put the data. — GJK
– GJK, Commented Mar 19, 2018 at 15:49

BentOnCoding · Accepted Answer · 2015-08-06 17:24:14Z

41

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.

edited Aug 6, 2015 at 17:24

answered Apr 5, 2013 at 16:47

BentOnCoding

28.3k14 gold badges68 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Silve2611 Over a year ago

This is a really smart solution! Thank you. With 'myBigJsonObj["property"] = value;' content can be created and fetched dynamically

indolentdeveloper Over a year ago

this might not always work. Especially when you want to set data from server side.

gyo Over a year ago

@theusguy on the server you could output a script tag with the data variable.

Athman · Accepted Answer · 2016-05-10 20:31:19Z

3

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

answered May 10, 2016 at 20:31

Athman

5946 silver badges15 bronze badges

Comments

Nick F · Accepted Answer · 2015-09-30 13:04:28Z

2

While there's nothing to stop you embedding a long string of JSON in a data attribute, arguably the more "correct" way of doing it would be to add one data attribute per property of the JSON data. eg:

Javascript:

var dataObj = { foo: 'something', bar: 'something else' }

HTML:

<div data-foo="something" data-bar="something else"></div>

This way each piece of data in the JSON object corresponds to a separate, independently-accessible piece of data attached to the DOM element.

Bear in mind that either way you'll need to escape the values you're inserting into the HTML - otherwise stray " characters will break your page.

answered Sep 30, 2015 at 13:04

Nick F

10.2k7 gold badges80 silver badges96 bronze badges

2 Comments

sad comrade Over a year ago

I believe if you use JSON.parse, characters are escaped if necessary

Transformer Over a year ago

hi, this is great idea!! can you please share how do I achieve this format? does the JSON deserializer append / or give you this format data-foo="something" data-bar="something else"

Arcanox · Accepted Answer · 2019-04-27 08:06:30Z

2

Technically you can, and I have seen several sites do this, but another solution is to store your JSON in a <script> tag and put a reference to the script tag in the data attribute. This is a better solution than just storing the data as a JS object in an actual script if the data is rendered to the page server-side, but there are CSP restrictions on inline script tags, for example.

HTML

<div data-data-id="#MyScriptData" id="x"></div>

<script type="application/json" id="MyScriptData">
{
    "fruit": "apple",
    ...
}
</script>

JS

$(function () {
    var dataId = $("#x").data("data-id");
    var dataTag = $(dataId);
    var dataJson = dataTag.html(); // returns a string containing the JSON data
    var data = JSON.parse(dataJson);

    ...
});

answered Apr 27, 2019 at 8:06

Arcanox

1,5751 gold badge11 silver badges23 bronze badges

1 Comment

Transformer Over a year ago

Hello this is interesting how do I find all the <li> list/or div items with a certain data-car attribute value=Hybrid and just get those div or li items or Id's back

Borz Alexandru · Accepted Answer · 2019-04-27 07:33:40Z

You could make use of Map. Where your element will be the key, and the value at that key could be an object in which you store wanted data. Something like this (not tested though):

(function(global) {

  const map = new Map();

  global.CustomData = {
    add(element, key, data) {
      if (!map.has(element)) {
        map.set(element, {});
      }

      map.get(element)[key] = data;

      return map.get(element);
    },

    get(element, key) {
      if (!map.has(element)) {
        return null;
      }

      if (key !== undefined) {
        return map.get(element)[key];
      }

      return map.get(element)
    },

    remove(element, key) {
      if (!map.has(element)) {
        return false;
      }

      delete map.get(element)[key];

      if (Object.keys(map.get(element)).length === 0) {
        map.delete(element);
      }

      return true;
    },

    clear(element) {

      if (!map.has(element)) {
        return false;
      }

      map.delete(element);

      return true;
    }
  }

})(window);

Collectives™ on Stack Overflow

Is it bad to add JSON on HTML data attribute?

5 Answers 5

3 Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related