时间戳

首页 > 解决方案 > 从 JSON 数据生成 HTML 树

javascript - 从 JSON 数据生成 HTML 树

问题描述

我有一个单一文件的网站......我们都知道带宽和互联网......是的......这就是为什么我只在需要时渲染部分用户界面。现在我想更进一步，使用 JSON 来存储我网站的一小部分（html 元素树）并按需生成实际的 HTML。

但我正在努力弄清楚如何将 JSON 对象“转换”为普通的旧 HTML。我找到了很多关于如何实现这一目标的主题和答案，但这些都没有解决问题。我需要一个可以生成具有任意数量的 chid 元素的树的解决方案，在子元素内部等等......所有这些使用的解决方案.innerHTML都可以从字面上使我的所有事件处理程序无效。我没有发现任何我不知道的东西......

JSON 表示法如下所示：

var htmlTree = {
	'type': 'section',
	'attr': {
		'id': 'someID',
		'class': 'someClass'
	},
	'content': 'section name',
	'children': [
		{
			'type': 'h1',
			'attr': {
				'class': 'heading'
			},
			'content': 'Heading',
			'children': [
				{
					'type': 'span',
					'content': 'text'
				},
				{
					'type': 'span',
					'content': 'more text'
				}
			]
		}
	]
}

结果如下所示：

<section id="someID" class="someClass">
	section name
	<h1 class="heading">
		Heading
		<span>text</span>
		<span>more text</span>
	</h1>
</section>

有人知道这个问题的解决方案吗？我真的不想使用任何框架或库。我知道做这样的事情有点难，这就是我在这里问的原因......

标签： javascripthtmljson

解决方案

现在带宽很便宜，因为服务器支持 gzip，它需要的更少。为什么要结合更具吸引力的 Json 和库来创建 HTML？

不是处理 JSON，而是注入准备好的（部分）html - 通过 Ajax 加载。

试试 http://www.json2html.com

您可以尝试这样的事情，但这只有在您有许多相同的行时才有意义（并且您的数据非常简单）。

<html>
<body>
<div id="ct"></div>
<script>
var data = [{ 
    "id" : 1,
    "f" : "Arya",
    "l" : "Stark"
},
{ 
     "id" : 1,
    "f" : "Jon",
    "l" : "Snowk"
}];

var parent = document.getElementById("ct");

data.forEach( function (row) {
	
	newDiv = document.createElement("div");
	newDiv.innerHTML = "<h1>" + row.f + " " + row.l + "</h1>";
	parent.append(newDiv);  
})
</script>
</body>
</html>

推荐阅读