如何使用解析后的JSON数据制作quiz表单？代码运行无输出如何排查

代码存在的3个核心问题 #

• 第一：obj.quiz是对象类型，不是数组，不存在length属性，for循环的判断条件i < obj.quiz.length结果永远为false，循环一次都不会执行，这是页面没有内容的根本原因。
• 第二：单选按钮的配置逻辑错误：所有题目的单选name属性都设为同一个options，会导致所有题目只能选一个选项；同时input没有设置id和label的for属性对应，点击标签无法选中对应选项。
• 第三：options是数组格式，直接拼接进字符串会被默认转为逗号分隔的字符串，不会生成多个选项。

修复后可正常运行的代码 #

const json = 
  { quiz: 
    { q1: { question: 'The question?', options: [ 'option one', 'option two'] , answer: 'The answer' } 
    , q2: { question: 'The question?', options: [ 'option one', 'option two'] , answer: 'The answer' } 
    , q3: { question: 'The question?', options: [ 'option one', 'option two'] , answer: 'The answer' } 
    , q4: { question: 'The question?', options: [ 'option one', 'option two'] , answer: 'The answer' } 
  } } 
  
var obj = JSON.parse(JSON.stringify(json));
// 先把quiz对象转成数组再遍历
const quizList = Object.values(obj.quiz)
let htmlStr = ''
// 整个测验用一个form包裹即可
htmlStr += '<form id="quizForm">'
quizList.forEach((quizItem, index) => {
  // 插入题目
  htmlStr += `<h2>${quizItem.question}</h2>`
  // 遍历当前题目的所有选项
  quizItem.options.forEach((option, optIndex) => {
    const optId = `q${index}_opt${optIndex}`
    htmlStr += `
      <input type="radio" id="${optId}" name="q${index}" value="${option}">
      <label for="${optId}">${option}</label>
      <br>
    `
  })
})
htmlStr += '</form>'
// 一次性插入DOM，比多次累加innerHTML性能更好
document.body.innerHTML = htmlStr

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