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

Question

Я играл вокруг с 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 в объект, массив не заполнит список (т.е. выше код не работает)

Edit 2

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

Answer 1

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

Object.assign({}, element.dataset) 

Для браузеров, которые Безразлично 't support Object.assign вы можете использовать polyfill

Answer 2

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

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

почерпнутый: Get list of data-* attributes using javascript/jQuery

Answer 3

Не забудьте про JSON.stringify и JSON.parse.

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

По Mozilla это должно работать весь путь обратно в IE 8 без polyfill.