Question

我有一个由Lighthouse生成的非常长，笨拙，无格式的JSON文件（一种进行页面加载时间分析的工具 - 所以这个文件有测试结果）。为了使其格式化为人们可读，我需要显然在这个文件周围创建一个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 /编写HTML

1 个答案: