Konvertieren von Daten- * Attribute zu einem Objekt

Question

ich um mit den attr-data-* Attribute von HTML5 bin zu spielen und die entsprechenden Javascript dataset

Ich bin viel dynamischer Formularverarbeitung zu tun, so dass ich am Ende Sachen wie diese bekommen:

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

Seit HTMLElement.dataset gibt eine DOM string map, die einzige Art, wie ich herausfinden, wie es in ein natives Objekt zu konvertieren ist:

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

Gibt es einen besseren Weg, dies zu tun?

Edit:

Warum sollte ich das tun? Sagen wir, ich habe viele, viele dieser Elemente. Ich möchte durch sie Schleife alle und schieben sie in eine Anordnung zur Verarbeitung später, das heißt

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

Jetzt habe ich eine Reihe von Objekten, das heißt [{feaux: "bar", fizz:"buzz"}....], dass ich arbeiten kann.

Allerdings, wenn ich nicht das DOM string map in ein Objekt konvertieren, wird das Array nicht aufgefüllt bekommen (dh den obigen Code nicht funktioniert)

Edit 2

näher Sehen, es ist eigentlich ein DOM string map, kein object. Korrektur von Tippfehlern in der ursprünglichen Frage, um dies zu berücksichtigen.

Answer 1

Sie Object.assign

Object.assign({}, element.dataset) 

Für Browser verwenden können, die doesn Objekt unterstützen. Zuweisung Sie können polyfill

verwenden

Answer 2

Hier ist eine kleine Funktion das Element Datensatz als ein normales Objekt abzurufen:

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

schöpfte aus: Get list of data-* attributes using javascript/jQuery

Answer 3

Vergessen Sie JSON.stringify und JSON.parse nicht.

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

Nach Mozilla dies sollte den ganzen Weg zurück zu IE 8 ohne polyfill arbeiten.