Почему эта ссылка на объект не работает?

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

The d синтаксис ищет свойство с именем «a» в data[q]. Поскольку нет такой вещи, она возвращает undefined. Когда вы используете нотацию массива, он ищет свойство, которое имеет значение, которое содержит a.

Например, на первой итерации, когда a === "a1", data[q].a1 эквивалентно data[q][a].