Bootcamp计时测验开发：遍历嵌套数组生成HTML li元素遇阻

你的这种存储方式完全没问题，属于常规的结构化数据设计：

• 用数组存储所有题目，便于遍历和按顺序加载
• 每个题目对象包含题干、选项集合、正确答案，字段清晰逻辑明确
  后续若有扩展需求（比如增加题目ID、难度标签），直接给对象追加字段即可，完全不会影响现有逻辑，不属于不良实践。

出现[object Object]是因为你直接将对象（或未正确提取的答案内容）当作字符串插入DOM，需要先提取答案的文本内容再创建元素。以下是两种常见场景的解决方法：

场景1：answers数组为字符串集合 #

如果你的题目数据结构是这样的：

const questions = [
  {
    question: "2+2等于多少？",
    answers: ["3", "4", "5", "6"],
    correctAnsw: "4"
  }
];

生成选项的代码可以这么写：

// 假设获取到当前要展示的题目对象currentQuestion
const answersList = document.getElementById('answers-list'); // 页面上的ul容器
currentQuestion.answers.forEach(answerText => {
  const li = document.createElement('li');
  li.textContent = answerText; // 直接赋值字符串文本
  answersList.appendChild(li);
});

场景2：answers数组为对象集合 #

如果每个选项是带额外属性的对象，比如：

const questions = [
  {
    question: "2+2等于多少？",
    answers: [
      { id: 1, text: "3" },
      { id: 2, text: "4" },
      { id: 3, text: "5" },
      { id: 4, text: "6" }
    ],
    correctAnsw: 2 // 对应正确选项的id
  }
];

需要提取对象中的文本字段：

const answersList = document.getElementById('answers-list');
currentQuestion.answers.forEach(answerObj => {
  const li = document.createElement('li');
  li.textContent = answerObj.text; // 提取对象的text属性
  // 可额外给li加自定义属性存储选项ID，方便后续判断答案
  li.dataset.answerId = answerObj.id;
  answersList.appendChild(li);
});

排查小技巧 #

如果仍不确定问题所在，可在循环中打印要插入的内容，确认其类型：

console.log(answerItem); // 查看是字符串还是对象

根据输出结果对应提取内容即可。

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