Question

我是网络开发的新手，并没有学过jquery。我想将JSON输出转换为HTML用户友好视图。

{
    "train": {
        "name": "BHOPAL  EXPRESS",
        "days": [
            {
                "day-code": "SUN",
                "runs": "Y"
            },
            {
                "day-code": "MON",
                "runs": "Y"
            },
            {
                "day-code": "TUE",
                "runs": "Y"
            },
            {
                "day-code": "WED",
                "runs": "Y"
            },
            {
                "day-code": "THU",
                "runs": "Y"
            },
            {
                "day-code": "FRI",
                "runs": "Y"
            },
            {
                "day-code": "SAT",
                "runs": "Y"
            }
        ],
        "number": "12155"
    },
    "response_code": 200
}

Answer 1

你应该这样做。

<input type="date" data-ng-model="personalDetailsObj.personalDetails.dob" name="dob" value="{{personalDetailsObj.personalDetails.dob}}" pattern="dd/MM/YYYY"/>

$scope.kycinfo  = {
   "title": "Mr",
   "name": "vishnu",
   "dob": "22-06-1980",
  };

Answer 2

您可以使用模板库（如https://www.maxcdn.com/one/tutorial/how-to-use-cdn-with-webfonts/）来执行此操作。

这是一个有效的例子。只需根据您的需要修改模板html。

＆＃13;

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
</head>
<body>
    <div id="result"></div>
    <!-- template html -->
    <script id="template" type="text/x-handlebars-template">
        <h1>{{train.name}}</h1>
        <ul>
            {{#each train.days}}
            <li>{{day-code}}: {{runs}}</li>
            {{/each}}
        </ul>
    </script>
    <script>
        var data = {
            "train": {
            "name": "BHOPAL  EXPRESS",
                    "days": [
                {
                    "day-code": "SUN",
                    "runs": "Y"
                },
                {
                    "day-code": "MON",
                    "runs": "Y"
                },
                {
                    "day-code": "TUE",
                    "runs": "Y"
                },
                {
                    "day-code": "WED",
                    "runs": "Y"
                },
                {
                    "day-code": "THU",
                    "runs": "Y"
                },
                {
                    "day-code": "FRI",
                    "runs": "Y"
                },
                {
                    "day-code": "SAT",
                    "runs": "Y"
                }
            ],
                    "number": "12155"
        },
            "response_code": 200
        };

        var source = $("#template").html();
        var template = Handlebars.compile(source);
        $("#result").html(template(data));
    </script>
</body>

＆＃13;

Answer 3

<pre></pre>

document.querySelector("pre").innerHTML = JSON.stringify(data, " ", 4);  //auto beautify!

JSON到HTML div

3 个答案: