1

我有一个由 Lighthouse 生成的非常长、笨拙、未格式化的 JSON 文件（一种进行页面加载时间分析的工具，因此该文件包含测试结果）。为了使其格式化以供人们阅读，我显然需要围绕该文件创建一个 UI。我的问题是我不确定如何开始工作。

我已经阅读过类似从 JSON 对象创建 HTML 的内容，我想我现在想尝试在浏览器中显示来自测试的所有信息......但是我会在哪里写呢？我现在有一个 Node.js 文件，它正在运行测试并JSON.stringify()用于将 JSON 的结果粘贴到一个文件中。我可以在创建 JSON 后立即生成 HTML 吗？（还有主要问题——如何从 JSON 文件创建 HTML？）

我刚开始使用 Node 和 JSON，非常感谢任何提示。

4

1 回答 1

4

是的，您可以从 JSON 文件创建 HTML。

这是一个使用 jQuery 完成的简单示例，首先创建一个包含所有元素的数组，然后使用.join("")它来解析它们。解析后，它们可以简单地附加到 DOM 中的任何位置：

var json_file = {
  "one": "Hi there",
  "two": "Another item",
  "three": "Third item"
}

var items = [];

$.each(json_file, function(key, val) {
  items.push("<li id='" + key + "'>" + val + "</li>");
});

$("<ul/>", {
  "class": "json-list",
  html: items.join("")
}).appendTo("body");

// Sample extension showcasing manipulation of inserted HTML
$(".json-list #two").css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

显然，您的 JSON（以及所需的 HTML 结构）越复杂，解析 JSON 的方法就越复杂。

模板引擎将使您的工作变得更加轻松，而且还有数以百计的此类引擎。一些比较流行的是：

希望这可以帮助！:)

于 2017-07-25T23:38:20.093 回答