このオブジェクト参照が機能しないのはなぜですか？

Question

このリストにオブジェクトデータの文字列を入力しようとしています。それは「未定義」として出てくる。これは動作しないデータオブジェクトへの参照です。どうして？

JS

data = [ 
     {"q":"How much?", "ac":"20%", "a1": "1%", "a2": "10%", "a3": "5%"}, 
     {"q":"What", "ac":"Ball", "a1": "Stone", "a2": "Bierd", "a3": "Carl"}, 
     {"q":"When?", "ac":"1999", "a1": "2000", "a2": "2001", "a3": "2002"} 
     ];  

var q=0 

window.onload = function() { 
    var ids =['a','b','c','d']; 
    var ans =['a1','a2','a3','ac']; 
    for (var j=0; j < ids.length; j++) { 
    var a = ans[j]; 
    document.getElementsByClassName(ids[j])[0].innerHTML = data[q].a; //[<-- PROBLEM HERE] 

}; 
} 

あなたは、プロパティアクセサとして変数を使用するように角括弧構文ではなく、ドット構文を使用する必要があるHTML

<ul class="answers_quiz"> 
<li class="a"></li> 
<li class="b"></li> 
<li class="c"></li> 
<li class="d"></li> 
</ul> 

Answer 1

：

element.innerHTML = data[q][a]; 

d ot構文はdata[q]の "a"という名前のプロパティを探します。そのようなものはないので、undefinedを返します。配列表記法を使用すると、aに含まれる任意の名前のプロパティが検索されます。

たとえば、最初の反復では、a === "a1"の場合、data[q].a1はdata[q][a]に相当します。