从 JSON 文件创建 UI/编写 HTML答案

【问题标题】：Creating a UI/writing HTML from a JSON file从 JSON 文件创建 UI/编写 HTML
【发布时间】：2018-01-01 01:40:36
【问题描述】：

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

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

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

【问题讨论】：

标签： html json node.js user-interface lighthouse

【解决方案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');

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

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

模板引擎会让您的工作变得更加轻松，还有数百个。一些比较流行的是：

希望这会有所帮助！ :)

【讨论】：

无论我是否使用模板引擎，在我看来，格式化 HTML/指定我需要从 JSON 文件中获取的信息都需要手动操作。这个文件可能有一百万行，而且根本没有格式化（它是 textedit 中的一大块文本，当我在 sublime 文本中打开它时，它是一个非常长的行）。我在想我必须将我的测试结果放入一个非 JSON 文件中，并找出另一种显示它们的方式。
好吧，我现在正在挖掘文件中的怪物，寻找我需要显示的元素的名称（我正在使用 Mustache）。我从您上面给出的示例开始，但现在我已经切换到 package.json 文件的创建和编辑。具体来说，我正在编辑script，以便可以使用 cli 命令生成模板。