JSFiddle - React, Tailwind, and code Playground

HTML

<div id="x" data-given-name="Fred" data-surname="Flintstone" data-city="Bedrock" data-city-description="A land right out of history" data-spouse-given-name="Wilma">data = </div>

CSS

#x {
    white-space: pre;
    font-family: consolas, monospace;
    font-size: 14px;
}

JavaScript

function getDataAttributes(el) {
    var data = {};
    [].forEach.call(el.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;
}

onload = function (e) {
    var el = document.getElementById("x");
    var data = getDataAttributes(el);
    var json = JSON.stringify(data, null, 2);
    el.appendChild(document.createTextNode(json));
};