从JSON文件创建UI /写入HTML

我有一个由Lighthouse生成的非常长，笨拙，未格式化的JSON文件（一种执行页面加载时间分析的工具 - 因此该文件具有测试结果）。为了使其格式化为人们可读，我需要在这个文件周围创建一个UI。我的问题是，我不知道如何开始工作。从JSON文件创建UI /写入HTML

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

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

来源

2017-07-25 P. Po

是的，您可以从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这些。一些比较流行的是：

希望这有助于！ :)

来源

2017-07-25 23:38:20

无论我是否使用模板引擎，在我看来，有一些手动方面来格式化HTML /指定我需要从JSON文件中得到什么信息。这个文件可能是一百万行，并且根本没有格式化（这是textedit中的一大块文本，当我用崇高的文本打开它时，只有一行非常长的行）。我想我必须将我的测试结果放入非JSON文件并找出另一种显示方式。 –

嗯，我正在挖掘一个文件的怪物，现在我需要显示的元素（和我使用的是胡须）的名称。我从上面给出的例子开始，但现在我已经切换到创建和编辑package.json文件。具体来说，我正在编辑“脚本”，以便可以使用cli命令生成模板。 –

从JSON文件创建UI /写入HTML

回答

相关问题