如何基于Angular生成的问卷模块JSON生成纯HTML文件？

核心原因 #

你自定义的Angular生成的JSON结构不符合SurveyJS的模型字段要求，二者字段命名、嵌套结构不一致，所以运行时会触发报错。

解决步骤 #

• 第一步：建立字段映射规则，把自定义JSON的字段转换为SurveyJS可识别的字段：
  • 根级字段surveyTitle → SurveyJS根级title
  • 根级字段surveyQuestions → SurveyJS根级questions数组
  • 单条问题字段questionTitle → 单条SurveyJS问题title
  • 单条问题字段questionType值为Single choice → 单条SurveyJS问题type值为radiogroup
  • 问题下questionGroup.options数组 → 单条SurveyJS问题choices数组，数组内optionText直接作为选项值
  • 其余自定义字段如surveyType、IsAnonymous、showRemarksBox可根据需求映射到SurveyJS对应配置项，无需求可直接过滤。
• 第二步：编写JSON转换函数，示例代码如下：

function convertCustomJsonToSurveyJson(customJson) {
  return {
    title: customJson.surveyTitle,
    questions: customJson.surveyQuestions.map(q => {
      const surveyQuestion = {
        type: q.questionType === 'Single choice' ? 'radiogroup' : q.questionType,
        title: q.questionTitle,
        choices: q.questionGroup.options.map(opt => opt.optionText)
      }
      // 如需开启备注框可保留以下配置
      if (q.questionGroup.showRemarksBox) {
        surveyQuestion.commentText = '备注：'
        surveyQuestion.hasComment = true
      }
      return surveyQuestion
    })
  }
}

• 第三步：替换原有JS代码中的固定JSON为转换后的JSON，修改后完整JS代码如下：

Survey.StylesManager.applyTheme("modern");

// 此处可替换为Angular生成的动态自定义JSON
const customJson = {"surveyTitle":"ddasdas","surveyType":"Training","surveyQuestions":[{"questionTitle":"dasda","questionType":"Single choice","questionGroup":{"options":[{"optionText":"dsadsa"},{"optionText":"dasdsa"}],"showRemarksBox":false}}],"IsAnonymous":false};

// 转换为SurveyJS兼容的JSON
const surveyJson = convertCustomJsonToSurveyJson(customJson);

window.survey = new Survey.Model(surveyJson);
survey.onComplete.add(function (sender) {
  document.querySelector('#surveyResult').textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
$("#surveyElement").Survey({model: survey});

调整后直接运行即可正常渲染问卷，不会再出现字段不匹配导致的报错。

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