如何用JS循环与条件语句解析JSON并动态生成HTML问卷组件？

当然可以！这种动态生成问卷的需求太常见了，完全不用硬编码每一个问题——咱们直接用JavaScript遍历你的JSON数据，根据每个问题的类型自动渲染对应的HTML元素就行。我给你一套简洁的实现方案，你可以直接套用：

第一步：准备你的问卷JSON数据 #

首先，你的JSON需要包含每个问题的基本信息：ID、问题文本、类型、选项（如果有）。比如这样的结构：

const surveyData = [
  {
    id: "q1",
    question: "你最喜欢的编程语言是？",
    type: "dropdown",
    options: ["JavaScript", "Python", "Java", "C++"]
  },
  {
    id: "q2",
    question: "你常用的开发工具是？",
    type: "multiple choice",
    options: ["VS Code", "WebStorm", "Sublime Text", "Vim"]
  },
  {
    id: "q3",
    question: "请简单描述你的开发经验：",
    type: "text"
  }
];

第二步：准备HTML容器 #

只需要一个空容器用来承载生成的问卷，不需要写任何具体的问题：

<div id="survey-container"></div>

第三步：核心JavaScript逻辑 #

用forEach遍历JSON数据，根据每个问题的type动态创建对应的HTML元素，然后插入到容器中：

const surveyContainer = document.getElementById("survey-container");

// 遍历每一个问题
surveyData.forEach(question => {
  // 创建一个独立的容器包裹当前问题的所有元素
  const questionWrapper = document.createElement("div");
  questionWrapper.className = "question-wrapper";
  
  // 添加问题文本
  const questionText = document.createElement("p");
  questionText.textContent = question.question;
  questionWrapper.appendChild(questionText);

  // 根据问题类型生成对应的表单组件
  switch(question.type) {
    // 下拉选择器
    case "dropdown":
      const select = document.createElement("select");
      select.id = question.id;
      // 添加默认提示选项
      const defaultOption = document.createElement("option");
      defaultOption.value = "";
      defaultOption.textContent = "请选择";
      select.appendChild(defaultOption);
      // 遍历生成下拉选项
      question.options.forEach(option => {
        const opt = document.createElement("option");
        opt.value = option;
        opt.textContent = option;
        select.appendChild(opt);
      });
      questionWrapper.appendChild(select);
      break;

    // 单选题（按钮形式）
    case "multiple choice":
      question.options.forEach(option => {
        const label = document.createElement("label");
        const radioBtn = document.createElement("input");
        radioBtn.type = "radio";
        radioBtn.name = question.id; // 同一组单选按钮name必须相同
        radioBtn.value = option;
        label.appendChild(radioBtn);
        label.appendChild(document.createTextNode(` ${option}`));
        questionWrapper.appendChild(label);
      });
      break;

    // 文本输入框
    case "text":
      const textarea = document.createElement("textarea");
      textarea.id = question.id;
      textarea.placeholder = "请输入你的回答...";
      questionWrapper.appendChild(textarea);
      break;

    // 可扩展更多类型：比如复选框、数字输入框等
    default:
      const defaultInput = document.createElement("input");
      defaultInput.type = "text";
      defaultInput.id = question.id;
      questionWrapper.appendChild(defaultInput);
  }

  // 将当前问题容器添加到总问卷容器中
  surveyContainer.appendChild(questionWrapper);
});

第四步：（可选）添加基础样式美化 #

给生成的元素加一点CSS，让问卷看起来更舒服：

.question-wrapper {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fafafa;
}

.question-wrapper p {
  margin: 0 0 12px 0;
  font-weight: 500;
}

.question-wrapper label {
  display: block;
  margin: 8px 0;
  cursor: pointer;
}

select, textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

关键优势 #

• 完全JSON驱动：所有问题的内容、类型、选项都存在JSON里，新增/修改问题只需要改JSON，不用动HTML/JS逻辑
• 无硬编码：HTML里没有任何具体的问题或选项，全部动态生成
• 可扩展性强：如果需要新增问题类型（比如复选框、评分星），只需要在switch里加新的case分支就行
• 结构清晰：每个问题都有独立的容器，方便后续维护和样式调整

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