有什么方法可以将 JSON 文件中的数据转换为 html 文件答案

【问题标题】：Is there any way to get data from a JSON file into an html file有什么方法可以将 JSON 文件中的数据转换为 html 文件
【发布时间】：2017-04-25 00:18:01
【问题描述】：

我有一个构建课程网站的应用程序。该应用程序创建了 X 数量的 JSON 文件，这些文件使用 javascript 填充 html 页面。

让我们说在我的 html 文件中我有这样一行

<title>CSE 308 Home</title>

但不是将 CSE 308 硬编码到 html 文件中，我希望它是一个从 json 文件中读取的变量。

类似

<title> ./js/CourseDetails.json.titleName </title>

【问题讨论】：

先看一些基本的 servlet 和 JSP 页面，了解 JSTL 和 jquery
为什么这个标签是Java？有区别。
您可以创建一个 REST API，它返回特定页面的 JSON 信息（查看 Spring Boot 或 Jersey）。您可以让它返回相关的课程信息（存储在 DB 或 .json 文件中）并使用 JavaScript 映射 JSON 的内容。
您是从服务器获取数据，还是从本地获取数据？
这里没有足够的信息来提供有意义的解决方案。根据您在前端和后端使用的内容，有无数种方法可以做到这一点。我不确定这怎么可能长达数千行并且在前端完全是静态的 - 从长远来看，关于 Java Web 应用程序的快速教程可能是一种更有效的方法。

标签： javascript java json

【解决方案1】：

JSON 文件作为这个东西

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

链接 JSON 文件：

<script type="text/javascript" src="data.json"></script>

做这样的事情：

var mydata = JSON.parse(data);

for(var i = 0; i < mydata.length; i++) {
    var item = document.createElement("li");
    var node = document.createTextNode(`${mydata[i].name} ${mydata[i].age}`);
    item.appendChild(node);

    var element = document.getElementById("list-container");
    element.appendChild(item);
}

【讨论】：