首页 > 解决方案 > Angular 从模块 JSON 生成纯 HTML

问题描述

Сan 不能从当前 JSON 数据生成纯 HTML 文件。

我试图从角度生成的模块 JSON 生成纯 HTML 文件:

{"surveyTitle":"ddasdas","surveyType":"Training","surveyQuestions":[{"questionTitle":"dasda","questionType":"Single choice","questionGroup":{"options":[{"optionText":"dsadsa"},{"optionText":"dasdsa"}],"showRemarksBox":false}}],"IsAnonymous":false}

为了解决它,我在下面使用了这个来源

从这里surveyjs.io

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>One choice - Radio Group question, jQuery Survey Library Example</title><meta name="viewport" content="width=device-width"/>
        <script src="https://unpkg.com/jquery"></script>
        <script src="https://unpkg.com/survey-jquery@1.8.75/survey.jquery.min.js"></script>
        <link href="https://unpkg.com/survey-core@1.8.75/modern.min.css" type="text/css" rel="stylesheet"/>
        <link rel="stylesheet" href="./index.css"></head>
    <body>
        <div id="surveyElement" style="display:inline-block;width:100%;"></div>
        <div id="surveyResult"></div>
        <script type="text/javascript" src="./index.js"></script>
    </body>
</html>

JS:

Survey
    .StylesManager
    .applyTheme("modern");

var json = {
    questions: [
        {
            "type": "radiogroup",
            "name": "car",
            "title": "What car are you driving?",
            "isRequired": true,
            "hasNone": true,
            "colCount": 4,
            "choices": [
                "Ford",
                "Vauxhall",
                "Volkswagen",
                "Nissan",
                "Audi",
                "Mercedes-Benz",
                "BMW",
                "Peugeot",
                "Toyota",
                "Citroen"
            ]
        }
    ]
};

window.survey = new Survey.Model(json);

survey
    .onComplete
    .add(function (sender) {
        document
            .querySelector('#surveyResult')
            .textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
    });

$("#surveyElement").Survey({model: survey});

但是我当前的 JSON 出现错误。

我的代码在这里:Stackblitz - 通过单击添加新调查 JSON 已生成。

标签: javascripthtmlangulartypescript

解决方案


推荐阅读