Javascript for loop Uncaught TypeError из атрибутов данных

Question

У меня есть набор наборов данных, привязанных к некоторым промежуткам, которые я пытаюсь выполнить, но продолжаю получать ошибку: dials.js:238 Uncaught TypeError: Cannot read property 'percentages' of undefined.

Моя пролетное строение выглядит следующим образом:

<span class="dial rent" 
     data-name="Rent" 
     data-value="56" 
     data-marker="40" 
     data-min="0" 
     data-max="100" 
     data-percentages="0.25, 1"> 
    </span> 

My JS является:

var dials = document.getElementsByClassName('dial'); 

function createGauges() { 
    for (var key in dials) { 
    var data = dials[key].dataset; 
    var percent = data.percentages.split(',').map(Number); 
    console.log(percent); 
    newDial(data.name, data.value, data.marker, data.min, data.max, percent); 
    } 
} 

Мой вывод данных структура выглядит следующим образом:

DOMStringMap {name: "Cost of goods", value: "23", marker: "20", min: "0", max: "100"…} 
marker:"20" 
max:"100" 
min:"0" 
name:"Cost of goods" 
percentages:"0.3, 1" 
value:"23" 

Я в тупик. Когда я регистрирую переменную percent, я получаю правильные данные и выводят на мой график D3. Но JS является ошибкой и заканчивается, поэтому остальные данные не будут заполняться.

Answer 1

Фактически for цикл выполняет итерации по клавишам объекта. В вашем случае для цикла идет ["0", "length", "item", "namedItem"] ключей для dials. Так что только действительный - 0. Посмотрите на ключи

for (var key in dials){ 
    console.log(key); // "0", "length", "item", "namedItem" 
} 

function createGauges() { 
    Array.prototype.forEach.call(dials, function(dial){ 
    var data = dial.dataset; 
    var percent = data.percentages.split(',').map(Number); 
    console.log(percent); 
    newDial(data.name, data.value, data.marker, data.min, data.max, percent); 
    }); 
}