Javascript for loopデータ属性からキャッチされない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> 

私の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); 
    }); 
}