从 JSON 文件创建 UI/writing HTML

Question

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

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

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

Answer 1

是的，您可以从 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 的方法就越复杂。

模板引擎将使您的工作变得更加轻松，还有 hunderds 个。一些比较受欢迎的是：

希望对您有所帮助！ :)

从 JSON 文件创建 UI/writing HTML

Creating a UI/writing HTML from a JSON file

html

user-interface

json

node.js

lighthouse