如何对数组中的嵌套对象使用forEach()

Question

我正在做一个浏览器测试项目。我制作了一个对象数组，其中的问题选项嵌套在另一个对象中。我正在努力弄清楚如何将用户选择的4个选项与答案数组中的正确答案进行比较。

我卡住了，因为我不知道如何在数组内嵌套对象上使用for each。

const list = document.createElement('ol');
const li1 = document.createElement('li');
const li2 = document.createElement('li');
const li3 = document.createElement('li');
const li4 = document.createElement('li');
const choices = document.querySelector('.choices');
choices.appendChild(list);
list.appendChild(li1);
list.appendChild(li2);
list.appendChild(li3);
list.appendChild(li4);
const possibleAnswers = ['1', '2', '3', '4', '5', '6', '7'];
const questionPool = [
{
questionOne:
{
answers:
{
answerOne: li1,
answerTwo: li2,
answerThree: li3,
answerFour: li4
}
}
},
{
questionTwo:
{
answers:
{
answerOne: li1,
answerTwo: li2,
answerThree: li3,
answerFour: li4
}
}
},
{
questionThree:
{
answers:
{
answerOne: li1,
answerTwo: li2,
answerThree: li3,
answerFour: li4
}
}
},
{
questionFour:
{
answers:
{
answerOne: li1,
answerTwo: li2,
answerThree: li3,
answerFour: li4
}
}
},
{
questionFive:
{
answers:
{
answerOne: li1,
answerTwo: li2,
answerThree: li3,
answerFour: li4
}
}
},
{
questionSix:
{
answers:
{
answerOne: li1,
answerTwo: li2,
answerThree: li3,
answerFour: li4
}
}
},
{
questionSeven:
{
answers:
{
answerOne: li1,
answerTwo: li2,
answerThree: li3,
answerFour: li4
}
}
}
];

Answer 1

如果我正确理解了你的问题，我想这个答案可能会对你有所帮助;

1. 你必须改变你的对象的结构，使其通用。
2. 你可以遍历你的对象数组，其中每个对象都指向4个答案的对象。
3. 循环访问4个可能的答案。

我是这样做的:

var list = document.createElement("ol");
var li1 = document.createElement("li");
var li2 = document.createElement("li");
var li3 = document.createElement("li");
var li4 = document.createElement("li");
let choices = document.querySelector(".choices")
choices.appendChild(list)
list.appendChild(li1)
list.appendChild(li2)
list.appendChild(li3)
list.appendChild(li4)
let questionPool = [
{
answers: {
1: li1,
2: li2,
3: li3,
4: li4
}
},
{
answers: {
1: li1,
2: li2,
3: li3,
4: li4
}
},
{
answers: {
1: li1,
2: li2,
3: li3,
4: li4
}
}
];
questionPool.forEach(element => {
for(const item in element.answers){
//here you have access to the 4 li
console.log(element.answers[item]);
}
});

Answer 2

我试着重构你的代码，因为大部分都是毫无理由的重复，更多的细节在注释中:

const questionEl = document.createElement('span')
const list = document.createElement("ol");
const nextBtn = document.createElement('button')
const choicesEl = document.querySelector(".choices")
nextBtn.textContent = 'Next'
choicesEl.appendChild(questionEl)
choicesEl.appendChild(list)
choicesEl.appendChild(nextBtn)
// Store you list elements by span (text of the answer) and radio (input field)
const listElements = Array.from({ length: 4 }).map(i => {
const li = document.createElement('li')
const radio = document.createElement('input')
const span = document.createElement('span')
radio.type = 'radio'
radio.name = 'quiz-radio'
li.appendChild(radio)
li.appendChild(span)
list.appendChild(li)
// for convenience
span.onclick = () => radio.click()
return { radio, span }
})
// use arrays instead of objects
const questionsPool = [
{
question: 'What is the formula for water ?',
right: 0,
answers: [
'H2O',
'NH3',
'CO2',
'C6H12O6',
]
}, {
question: 'What color is the sky ?',
right: 1,
answers: [
'blue',
'skyblue',
'lightblue',
'navyblue',
]
}
]
let score = 0
let questionIndex = 0
// update the texts in the spans
const updateQuestion = () => {
const { question, answers } = questionsPool[questionIndex]
questionEl.textContent = question
for (let i = 0; i < 4; i++)
listElements[i].span.textContent = answers[i]
}
// inital rendering
updateQuestion()
nextBtn.onclick = () => {
// if the user selected the right answer : increment his score
if (listElements[questionsPool[questionIndex].right].radio.checked) score++


// if there is remaining question
if (questionIndex + 1 < questionsPool.length) {
// go to the next one and update texts
questionIndex++
updateQuestion()
}

else
// show the final user score
console.log({ score })
}

<div class="choices"></div>

希望对你有帮助!