My question basically is exactly like this question. I am just wondering, if there is a way to achieve this without jQuery.

The following code does not work. I have also tried it with an array, but just like the object it is stored as a string. Is there something I am doing wrong, or is it just not possible in plain javascript?

var div = document.getElementById("testDiv");
var obj = {name: "Test1", value: 100};
div.setAttribute("data-obj", obj);

var arr = [59, 40, 3, 2, 1, 0];
div.setAttribute("data-arr", arr);

console.log("Object-Value: "+div.dataset.obj+"; Type: "+(typeof div.dataset.obj)+"; Name: "+div.dataset.obj.name);
console.log("Array-Value: "+div.dataset.arr+"; Type: "+(typeof div.dataset.arr)+"; Third Value: "+div.dataset.arr[2]);

<div id="testDiv">This is a test.</div>

My question basically is exactly like this question. I am just wondering, if there is a way to achieve this without jQuery.

The following code does not work. I have also tried it with an array, but just like the object it is stored as a string. Is there something I am doing wrong, or is it just not possible in plain javascript?

var div = document.getElementById("testDiv");
var obj = {name: "Test1", value: 100};
div.setAttribute("data-obj", obj);

var arr = [59, 40, 3, 2, 1, 0];
div.setAttribute("data-arr", arr);

console.log("Object-Value: "+div.dataset.obj+"; Type: "+(typeof div.dataset.obj)+"; Name: "+div.dataset.obj.name);
console.log("Array-Value: "+div.dataset.arr+"; Type: "+(typeof div.dataset.arr)+"; Third Value: "+div.dataset.arr[2]);

<div id="testDiv">This is a test.</div>

• javascript
• custom-data-attribute

• 2 Why are you adding data to a DOM element? I don't think it's a good idea. – Satish Kumar Commented Jun 3, 2019 at 18:57
• 1 You should consider creating an object with the id (or unique selector of some kind) of the element as the key and the data itself as a property. Then you can easily get the data and you don't have to worry about serialization. – Heretic Monkey Commented Jun 3, 2019 at 19:01
• @SatishKumar the DOM element visualisies an entry of a database. The user can select certain settings so that the displayed data changes accordingly. Since there are multiple of such entries, I wanted to save the entry-objects for each DOM element. Do you think there is a more efficient way to approach this? – Fay Boisam Commented Jun 3, 2019 at 19:02
• Most modern development centers around making the UI dependent on the data Witness frameworks like Angular, React, etc.., where the data are transformed into the UI. You change the data and the UI changes, rather than the other way around. – Heretic Monkey Commented Jun 3, 2019 at 19:09
• 1 There are a number of ways, but the easiest to grasp is var elementData = { "testDiv": { "obj": { name: "Test1", value: 100 }, "arr": [59,40,3,2,1,0] }; Then to get the data out, var obj = elementData.testDiv.obj (or elementData["testDiv"].obj if you have the id as a string). – Heretic Monkey Commented Jun 3, 2019 at 19:52

2 Answers 2

Use JSON.stringify() before storing the data in the attribute. It is basically serializing the data into a string.

var div = document.getElementById("testDiv");
var obj = JSON.stringify({name: "Test1", value: 100});
div.setAttribute("data-obj", obj);

var arrayAsJSON = JSON.stringify([59, 40, 3, 2, 1, 0]);
div.setAttribute("data-arr", arrayAsJSON);

Then use JSON.parse() after you fetch the attribute value and before presenting it. This will deserialize it back to a javascript object, array or simple value, depending on your case.

You need to change your object/array into json (string) using JSON.stringify (and parse for read)

var obj = {name: "Test1", value: 100};
var arr = [59, 40, 3, 2, 1, 0];

testDiv.dataset.obj = JSON.stringify(obj);
testDiv.dataset.arr = JSON.stringify(arr);

console.log( JSON.parse(testDiv.dataset.obj).name );
console.log( JSON.parse(testDiv.dataset.arr)[2] );

<div id="testDiv"></div>