如何成功遍历对象数组？使用forEach遇异常，求助在div中展示内容

嘿，我看到你尝试用forEach遍历对象数组，想把内容展示到div里但没得到预期结果。先梳理下你代码里的问题，再给你完整的解决方案：

你代码里的核心问题 #

1. 你的代码片段里getquiz = getquiz...没写完，而且直接给getquiz赋值会覆盖掉原本的DOM元素引用，而不是往div里追加内容；
2. 没有正确地遍历每个对象的嵌套属性（比如选项数组answere）来生成对应的HTML结构。

完整的正确实现代码 #

var questions = [
    { 
        question: 'my name is?', 
        answere: ['jame', 'rock', 'batista', 'micheal'], 
        correctAnswere: 'Ahmad' 
    }, 
    { 
        question: 'your name is?', 
        answere: ['jhon', 'rock', 'watson', 'cook'], 
        correctAnswere: 'Ahmad' 
    }
];
var getquiz = document.getElementById('demo');

// 先准备一个空字符串拼接所有HTML，避免频繁操作DOM影响性能
let quizContent = '';

questions.forEach(function(questionItem) {
    // 拼接问题标题
    quizContent += `<h4>${questionItem.question}</h4>`;
    
    // 拼接选项列表
    quizContent += '<div class="options">';
    questionItem.answere.forEach(function(option, idx) {
        // 给选项加上A/B/C/D的序号，让展示更清晰
        const optionLabel = String.fromCharCode(65 + idx);
        quizContent += `<p>${optionLabel}. ${option}</p>`;
    });
    quizContent += '</div>';
    
    // 拼接正确答案，用强调样式突出显示
    quizContent += `<p><strong>正确答案：</strong>${questionItem.correctAnswere}</p>`;
    quizContent += '<hr>'; // 加个分割线区分不同问题
});

// 最后一次性把所有内容插入到目标div中
getquiz.innerHTML = quizContent;

代码说明 #

• 我们先创建quizContent字符串来存储所有要生成的HTML，避免在循环里频繁修改DOM（频繁操作DOM会拖慢页面渲染速度）；
• 外层forEach遍历每个问题对象，内层再用forEach遍历每个问题的选项数组，还额外给选项加上了A/B/C/D的序号，让展示逻辑更直观；
• 最后用innerHTML把拼接好的所有内容一次性插入到demodiv里，这样就能正确展示所有问题、选项和答案了。

内容的提问来源于stack exchange，提问作者Ahmad Bilal