从 JSON 生成带有 JS 的 HTML 页面
Posted
技术标签:
【中文标题】从 JSON 生成带有 JS 的 HTML 页面【英文标题】:Generate HTML page with JS from JSON 【发布时间】:2012-03-26 09:22:54 【问题描述】:我正在寻找一个使用 javascript 解析 JSON 文件并输出 html 文件或填充 html 文件的非常基本的示例。到目前为止,我找到的所有示例都有代码 sn-ps 并且我没有背景来填充它们之间的空白。
感谢您提供的任何小提琴(太棒了)、链接和智能 a*s cmets。
【问题讨论】:
你的意思是像var data = JSON.parse('"foo": "42"'); document.body.appendChild(document.createTextNode(data.foo));
?解析 JSON 很容易。您可以使用适当的方法(createElement
、appendChild
)添加 DOM 元素。必须创建哪些元素以及应该显示哪些数据取决于您想要什么,对此没有规范的答案。使用模板可能会更好。
终于有人愿意感谢我的聪明评论,我想不出一个!
是的,除了 JSON 将在其自己的文件中位于同一服务器上。我想我刚刚找到了一个小提琴。 jsfiddle.net/qmacro/NJMyD
【参考方案1】:
您可以使用微模板库,例如 Mustache,使用 key
模板语法将传入的 JSON 对象解析为 HTML sn-ps。如果您的对象看起来像:
var myObj =
name: 'Joe Smith',
age: 25,
features:
hairColor: 'red',
eyeColor: 'blue'
;
使用 Mustache,您可以轻松地将其渲染为 HTML,使用 # 和 / 遍历嵌套对象:
Mustache.render('Hello, my name is name and I am age years old. #features I have hairColor hair and eyeColor eyes./features', myObj);
哪个输出:
您好,我叫乔·史密斯,今年 25 岁。我有一头红头发和蓝眼睛。
编辑:更密切的应用程序 - 使用具有嵌套对象列表的模板动态生成控制面板。这是我的模板和对象(为清晰起见,将 HTML 分解为列表并加入):
var panel = [
'<div id="cpanel">',
'#cpanel',
'<div class="panel_section">',
'<h1 class="cpanel">name</h1>',
'<p>',
'#content',
'<button id="id">id</button>',
'/content',
'</p>',
'</div>',
'/cpanel',
'</div>',
].join('\n');
var panelObj =
cpanel: [
name: 'playback',
content: [
id: 'play',
id: 'pause',
id: 'stop'
]
,
name: 'zoom',
content: [
id: 'zoomIn',
id: 'zoomOut'
]
]
;
然后你用 Mustache 渲染:
Mustache.render(panel, panelObj);
哪个输出:
<div id="cpanel">
<div class="panel_section">
<h1 class="cpanel">playback</h1>
<p>
<button id="play">play</button>
<button id="pause">pause</button>
<button id="stop">stop</button>
</p>
</div>
<div class="panel_section">
<h1 class="cpanel">zoom</h1>
<p>
<button id="zoomIn">zoomIn</button>
<button id="zoomOut">zoomOut</button>
</p>
</div>
</div>
【讨论】:
【参考方案2】:模板示例
我建议使用模板工具,例如 PURE...
这种工具的目的是分离逻辑和表示。
例如,使用上述工具从 JSON 数据生成列表如下所示:
JSON 数据文件
'who':'BeeBole!'
HTML 文件
<html>
<head>
<title>PURE Unobtrusive Rendering Engine</title>
<script src="../libs/jquery.js"></script>
<script src="../libs/pure.js"></script>
</head>
<body>
<!-- the HTML template -->
Hello <a class="who" href="#"></a>
<script>
// the JSON data we want to render
$.getJSON('yourJSONdataFile.json', function(data)
// run the rendering
$('a').autoRender(data);
// PURE tries to match class with the JSON property and replace the node value with the value of the JSON property
);
</script>
</body>
</html>
如果您有简单的 JSON 数据,这是最基本的方法(请参阅工作 JSFiddle 示例 there)。如果基本方法不合适,Get Started 指南将引导您了解另一个示例。如需更多高级功能,请查看documentation。
替代方案
在上面的例子中使用 PURE 并没有什么特别的原因。你有很多选择:
EJS Mustache Tempo JSON Template jQuote2 JTemplates...或者您可以按照there 的说明手动操作。
【讨论】:
【参考方案3】:您可能想查看jQuery.dForm。它有助于使用 JSON 动态创建 HTML 和表单。
【讨论】:
【参考方案4】:所以我假设你的意思是你的 JSON 中包含 HTML 字符串。
假设您的 JSON 是:
"htmlString" : "<div> now thats smart! </div>"
您可以通过如下编写 HTML 来在 HTML 中呈现它:
<html>
<head>
var myjson = "htmlString" : "<div> now thats smart! </div>"
<script type="text/javascript">
function loadHTML()
document.getElementByTagName("body").innerHTML(myjson["htmlString"]);
</script>
</head>
<body onload='loadHTML()'>
</body>
</html>
请注意,您还可以使用 AJAX 获取 JSON 并呈现它 但是,请注意,从服务器传输时在 JSON 中嵌入 HTML 被视为安全漏洞。 相反,您可以使用 AJAX 直接从服务器获取部分 HTML,然后使用 javascrip 和 REST/SOA 将部分 HTML(模板)替换为动态值
希望对你有帮助
【讨论】:
谢谢维杰。我可能没有正确描述我的问题。我想使用一个 JSON 数据文件,用 javascript 抓取它,然后用 HTML 格式化它。【参考方案5】:EJS 或嵌入式 java 脚本,很好玩。您可以使用更复杂的前端框架,例如骨干网或 facebook 的 React。在 codeschool 的 EJS 节点课程上有一些很好的视频教程。这是一个例子
var foo = 'city':'SF', 'party':'now'
使用 EJS 就这么简单:
<div> <p> going to <%= foo.city %> to party <%= foo.party %> </p></div>
获取文本:'现在去旧金山参加派对'
使用 EJS 或我最喜欢的 PEJS,您可以执行 if、switch、for()、Date() .....您明白了。在此处查找Pejs 并阅读EJS。你可以做很多很酷的事情
【讨论】:
以上是关于从 JSON 生成带有 JS 的 HTML 页面的主要内容,如果未能解决你的问题,请参考以下文章
使用 Node.js 和 express-handlebars 从 JSON 文件渲染 html