我正在寻找一个使用Javascript解析JSON文件并输出html文件或填充html文件的基本示例。到目前为止我找到的所有示例都有代码片段,我没有背景填写之间的空白。
感谢任何小提琴(很棒),链接和智能评论。
答案 0 :(得分:14)
您可以使用微型模板库(如Mustache)使用{{ key }}
模板语法将传入的JSON对象解析为HTML代码段。如果您的对象如下:
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);
输出:
您好,我叫Joe Smith,今年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>
答案 1 :(得分:14)
我建议使用模板工具,例如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的特殊原因。你有很多选择:
...或者您可以按照there说明手动完成。
答案 2 :(得分:3)
您可能需要查看jQuery.dForm。它有助于使用JSON动态创建HTML和表单。
答案 3 :(得分:2)
所以我假设你的意思是你的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并进行渲染 但请注意,从服务器传输时将HTML嵌入JSON中会被视为安全漏洞。 相反,您可以使用AJAX直接从服务器获取部分HTML,然后使用javascrip和REST / SOA将动态值替换为部分HTML(模板)
希望这会有所帮助
答案 4 :(得分:0)
EJS或嵌入式java脚本,非常有趣。您可以使用像骨干或Facebook的React这样的前端框架,它更加复杂。关于EJS的codechool节点课程,有一些很好的视频教程。这是一个例子
var foo = {'city':'SF', 'party':'now'}
与EJS一样简单:
<div> <p> going to <%= foo.city %> to party <%= foo.party %> </p></div>
获取文字:'现在去SF参加派对'
使用EJS,或者我喜欢的PEJS,你可以做,如果,切换,换(),日期().....你明白了。查看此处查看Pejs并阅读EJS。你可以做很多很酷的东西