如何在Ajax的html()方法中获取并渲染子数组数据？

我来帮你搞定这个问题！你当前的代码里，题目选项是硬写死的Choice 1、Choice 2，但实际每个题目都有对应的子数组（选项列表），我们需要动态遍历这个子数组来生成对应的选项HTML，这样就能自动渲染所有子数组内容了。

核心思路步骤： #

• 首先确认你的data.quizzes数据结构里，每个题目对象应该包含一个子数组（比如叫choices），用来存储该题的所有选项，类似这样：

  const data = {
    quizzes: [
      {
        question: "这是题目1？",
        quiz_time: 60,
        choices: ["选项A", "选项B", "选项C"]
      },
      // 其他题目...
    ]
  };
  

• 在生成表单HTML的时候，遍历当前题目的选项子数组，把每个选项转换成对应的HTML元素（比如带单选框的选项行）
• 把动态生成的选项HTML字符串插入到表单的合适位置，替换原来硬编码的选项部分

修改后的代码片段（重点看打印函数部分）： #

// printing function
if(typeof data.quizzes[index] != 'undefined'){
  // 1. 先获取当前题目的选项数组
  const currentChoices = data.quizzes[index].choices;
  // 2. 动态生成选项HTML
  let choicesHtml = '';
  currentChoices.forEach((choice, idx) => {
    // 这里可以根据需求改成单选/多选，比如加radio input
    choicesHtml += `
      <div class="col-md-12 mt-2">
        <input type="radio" name="question${index}" id="choice${index}-${idx}" value="${choice}">
        <label for="choice${index}-${idx}">${choice}</label>
      </div>
    `;
  });

  // 3. 把动态生成的选项插入到表单中
  var row = `<form>
    <div class="row">
      <div class="col-md-12">
        <div class="pull-left questionTitle">
          ${data.quizzes[index].question}
        </div>
        <div class="pull-right" id="countdown"></div>
      </div>
      <!-- 这里替换成动态生成的选项 -->
      ${choicesHtml}
    </div>
  </form>`;
  $('.answerPanel').html(row);
  index++;
}

额外提示： #

• 如果你的选项子数组不是叫choices，记得把代码里的data.quizzes[index].choices改成你实际的字段名
• 可以根据需求调整选项的样式，比如加间距、修改input类型（checkbox多选）等
• 注意定时器部分的countdown元素，每次渲染新题目时会重新生成，这个逻辑是没问题的，因为新的表单里会包含新的id="countdown"元素

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