将JSON转为HTML单选测验时遇fetch与遍历问题求助

导致错误的核心问题 #

1. Fetch 链未返回解析后的 JSON：第一个 then 回调里调用了 response.json() 但没有返回结果，导致后续 then 接收到的参数是 undefined，直接引发读取 length 时的类型错误。
2. JSON 结构是对象而非数组：你的 JSON 数据中，quiz 是包含多个问题对象的键值对集合，不是数组，因此无法通过 length 属性获取长度。
3. 循环条件笔误：1 < quiz.length 应为 i < quiz.length（原条件会导致无限循环）。
4. HTML 标签拼写错误：imput 应为 input。
5. 选项渲染方式错误：直接拼接数组会生成逗号分隔的字符串，需要遍历每个选项生成独立的单选按钮。

修正后的代码 #

<script>
fetch("quiz.json")
  .then(function(response) {
    return response.json(); // 必须返回解析后的JSON
  })
  .then(function(data) {
    // 将问题对象转换为数组以便遍历
    const questions = Object.values(data.quiz);
    
    questions.forEach(function(questionObj) {
      // 插入问题标题
      document.body.innerHTML += `<h2>${questionObj.question}</h2>`;
      
      // 遍历选项生成单选按钮组
      questionObj.options.forEach(function(option) {
        document.body.innerHTML += `
          <div>
            <input type="radio" name="quiz-group-${questionObj.question}" value="${option}">
            <label>${option}</label>
          </div>
        `;
      });
      
      // 插入正确答案
      document.body.innerHTML += `<p>正确答案: ${questionObj.answer}</p>`;
    });
  })
  .catch(function(error) {
    console.error("加载或解析JSON失败:", error);
  });
</script>

额外注意事项 #

• JSON 文件格式验证：确保 quiz.json 使用普通双引号（"），而非 HTML 实体 "，否则 JSON 解析会失败。正确的 JSON 结构示例：

{
  "quiz": {
    "q1": {
      "question": "Which one is correct team name in NBA?",
      "options": [
        "New York Bulls",
        "Los Angeles Kings",
        "Golden State Warriros",
        "Huston Rocket"
      ],
      "answer": "Huston Rocket"
    },
    "q2": {
      "question": "'Namaste' is a traditional greeting in which Asian language?",
      "options": [
        "Hindi",
        "Mandarin",
        "Nepalese",
        "Thai"
      ],
      "answer": "Hindi"
    }
  }
}

• 单选按钮分组：给每个问题的单选按钮设置相同的 name 属性，确保同一问题只能选择一个选项。
• 错误处理：添加 catch 块捕获请求或解析过程中的错误，便于调试。

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