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

Answer 1

You can use Object.assign

Object.assign({}, element.dataset) 

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

Answer 2

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

Answer 3

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.

Answer 4

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