Преобразование атрибутов data- * в объект

Я играю с attr-data-* атрибутами HTML5 и соответствующим javascript dataset

Я делаю много обработки динамической формы, поэтому в итоге получаю такие вещи:

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

Так как HTMLElement.dataset возвращает DOM string map, единственный способ понять, как его преобразовать в собственный объект:

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

Есть ли лучший способ сделать это?

Edit:

Почему я хочу это сделать? Скажем, у меня много, многие из этих элементов. Я хочу пропустить их все и вставить в массив для обработки позже, т.е.

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

Теперь у меня есть массив объектов, т.е. [{feaux: "bar", fizz:"buzz"}....], с которым я могу работать.

Однако, когда я не преобразовываю DOM string map в объект, массив не заполняется (т.е. код выше не работает)

Изменить 2

Подойдя ближе, на самом деле это DOM string map, а не object. Исправление опечаток в исходном вопросе, чтобы отразить это.

Ответ 1

Вы можете использовать Object.assign

Object.assign({}, element.dataset)

Для браузеров, которые не поддерживают Object.assign, вы можете использовать polyfill

Ответ 2

Не забывайте о JSON.stringify и JSON.parse.

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

Согласно Mozilla, это должно полностью вернуться к IE 8 без polyfill.

Ответ 3

Здесь небольшая функция для извлечения набора данных элемента как обычного объекта:

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;
}

Подчеркнуто: Получить список атрибутов data- * с помощью javascript/jQuery

Ответ 4

в es6 вы можете использовать объект распространения.
{ ...element.dataset }