High level data structures in html data attribute

Question

I am happy that the html5 data attribute exists.

I can write a simple string into html attributes and access them via jquery.

But .... wouldn't it be nice to have more than a simple string?

Is there no way to encode JSON into these data attributes.

In my current use case I need to store a list of strings in a html5 data attribute.

You can't nest this list some other way in your JavaScript? It's not very good separation of concerns... — Emil S. Jørgensen, Mar 29 '17 at 11:05
You mean like.... `$("#ele").attr('data-example', JSON.stringify(new Array('1', '2')))`? — Zze, Mar 29 '17 at 11:05

Dhiraj · Answer 1 · 2017-03-29T12:18:30.893

   <div id ="test" data-something='{"something":"something"}'></div>

string in the data-attribute is automatically converted to a JavaScript object.

you can access this in javascript like this.

var somethingObject = $("#test").data("something");

var jsonSomethingObject = JSON.stringify(somethingObject);

console.log(somethingObject); //this will print the main javascript object
console.log(jsonSomethingObject);// this will print stringify javascript object

you can refer the snippet for same

var someObject = $("#test").data("student");
    
var jsonData = JSON.stringify(someObject);
 
 $('#display').text("id:"+someObject.id +" name:"+someObject.name)
console.log(someObject);
console.log(jsonData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" data-student='{"name": "Dhiraj", "id": 1}' />

<div id="display"></div>

Could you please show me how I can access this dictionary from jquery. Up to now I thought I get a simple string. — guettli, Mar 29 '17 at 11:35

score 0 · Answer 2 · answered Mar 29 '17 at 11:06

0

You can put json as string in data attribute and use JSON.parse() to get it.

answered Mar 29 '17 at 11:06

Lucas Franco

383
2
13

score 0 · Answer 3 · answered Mar 29 '17 at 11:08

Seems like you can use JSON.stringify

$("#ele").attr('data-example', JSON.stringify(new Array('1', '2')));

console.log($("#ele").attr('data-example'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='ele' data-example="nothing"></div>

Emil S. Jørgensen · Answer 4 · 2017-03-29T11:59:01.057

You can store JSON strings in data- attributes.

function onPClick(evt) {
  var special = evt.target.getAttribute('data-special');
  if (special != null) {
    try {
      console.log("JSON", JSON.parse(special));
    } catch (error) {
      console.log("STANDARD", special);
    }
  } else {
    console.log("NULL");
  }
}
var ps = document.getElementsByTagName("p");
for (var pi = 0; pi < ps.length; pi++) {
  var p = ps[pi];
  p.onclick = onPClick;
}

<p>I am special!</p>
<p data-special='YES!'>I am special!</p>
<p data-special='{"a":"bob"}'>I am special!</p>

For separation of concerns, it would be prettier to hold you data in a place that doesn't have to update the HTML every time it changes:

var p = document.body.appendChild(document.createElement("p"));
p.innerHTML = "Click me!";
Object.defineProperty(p, 'mySuperSecretValue', {
  value: 37,
  writable: true,
  enumerable: true,
  configurable: true
});
p.onclick = function pclick(evt) {
  console.log(evt.target.mySuperSecretValue++, evt.target.outerHTML);
};

High level data structures in html data attribute

4 Answers4