Ответ 1
Вы можете использовать Object.assign
Object.assign({}, element.dataset)
Для браузеров, которые не поддерживают Object.assign, вы можете использовать polyfill
Я играю с 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
. Исправление опечаток в исходном вопросе, чтобы отразить это.
Вы можете использовать Object.assign
Object.assign({}, element.dataset)
Для браузеров, которые не поддерживают Object.assign, вы можете использовать polyfill
Не забывайте о JSON.stringify и JSON.parse.
var data = document.getElementById('someElement').dataset;
data = JSON.parse(JSON.stringify(data));
Согласно Mozilla, это должно полностью вернуться к IE 8 без polyfill.
Здесь небольшая функция для извлечения набора данных элемента как обычного объекта:
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
в es6 вы можете использовать объект распространения.
{ ...element.dataset }