Converting data-* attributes to an object

Question

I'm playing around with the attr-data-* attributes of HTML5 and the corresponding javascript dataset

I'm doing alot of dynamic form processing, so I end up getting stuff like this:

<input data-feaux="bar" data-fizz="buzz"/>

Since HTMLElement.dataset returns a DOM string map, the only way I can figure out how to convert it into an native object is:

var obj = JSON.parse(JSON.stringify(input_el.dataset))

Is there a better way to do this?

Edit:

Why would I want to do this? Let's say I have many, many of these elements. I want to loop through them all and push them into an array for processing later, i.e.

elements = document.querySelectorAll("input")
my_data_array = []
for(var i = 0; i < elements.length; i++) {
    my_data_array.push(elements[i].dataset)
}

Now I have an array of objects, i.e. [{feaux: "bar", fizz:"buzz"}....] that I can work with.

However, when I don't convert the DOM string map into an object, the array doesn't get populated (i.e. the code above doesn't work)

Edit 2

Looking closer, it is actually a DOM string map, not an object. Correcting typos in the original question to reflect this.

@cookiemonster because `DOM string object` doesn't like being pushed into an array and I loose the keys; I've edited my question to give an example — CamelBlues, May 30 '14 at 19:29
In what browser does that not work? Works fine for me in Firefox. ...works in Chrome too. — cookie monster, May 30 '14 at 20:04
...anyway, if you wanted to store the `dataset` objects, you might as well store the elements themselves since storing the `dataset` is going to retain a reference to the element since the `dataset` relies on the element to work. — cookie monster, May 30 '14 at 20:06
@cookiemonster yeah, I can get this to work in the console of Chrome, but some reason loading it from a script file or running it with a headless web browser, the `DOM string maps` don't go into the array correctly. I'm going to be doing more testing; this could be a bug higher up in the line :P — CamelBlues, May 30 '14 at 20:38

Agung Prasetyo · Accepted Answer · 2016-10-28T18:38:33.783

44

You can use Object.assign

Object.assign({}, element.dataset)

For browsers that doesn't support Object.assign you can use polyfill

edited Oct 28 '16 at 18:38

answered Jun 10 '16 at 08:34

Agung Prasetyo

4,353
5
29
37

7

On latest Safari this doesn't works. Returns always empty {} So you need to transform dataset to a normal object first. – Mevrael Jul 25 '16 at 11:05
2

was just bitten by this one. Safari 9.x fails. Safari 10.x + works. – George Katsanos Jun 15 '17 at 08:28

score 10 · Answer 2 · answered Aug 18 '19 at 12:46

10

in es6 you can use the object spread.
{ ...element.dataset }

answered Aug 18 '19 at 12:46

PhilWilliammee

541
6
10

score 9 · Answer 3 · answered Jan 12 '18 at 23:08

9

Don't forget about JSON.stringify and JSON.parse.

var data = document.getElementById('someElement').dataset;
data = JSON.parse(JSON.stringify(data));

According to Mozilla this should work all the way back to IE 8 without a polyfill.

answered Jan 12 '18 at 23:08

Collin Craige

109
1
8

score 2 · Answer 4 · edited May 23 '17 at 12:34

Here's a little function to retrieve the element dataset as a normal object:

function datasetToObject(elem){
    var data = {};
    [].forEach.call(elem.attributes, function(attr) {
        if (/^data-/.test(attr.name)) {
            var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
                return $1.toUpperCase();
            });
            data[camelCaseName] = attr.value;
        }
    });
    return data;
}

Scooped up from: Get list of data-* attributes using javascript / jQuery

Converting data-* attributes to an object

4 Answers4

Linked