Javascript JSON对象放入Mustache.js表中
我正在尝试使用Mustache.js创建一个带有JSON对象的表。 我希望它显示两行,但是它只显示第二行。 我怀疑第一行在循环中再次绑定时被第二行覆盖 我该如何解决这个问题?还是我应该遵循更好的结构 Javascript:Javascript JSON对象放入Mustache.js表中,javascript,json,html-table,mustache,Javascript,Json,Html Table,Mustache,我正在尝试使用Mustache.js创建一个带有JSON对象的表。 我希望它显示两行,但是它只显示第二行。 我怀疑第一行在循环中再次绑定时被第二行覆盖 我该如何解决这个问题?还是我应该遵循更好的结构 Javascript: var text = '[{"Fullname":"John", "WorkEmail":"john@gmail.com"},{"Fullname":"Mary", "WorkEmail":"mary@gmail.com"}]' var obj = JSON.parse(te
var text = '[{"Fullname":"John", "WorkEmail":"john@gmail.com"},{"Fullname":"Mary", "WorkEmail":"mary@gmail.com"}]'
var obj = JSON.parse(text);
$(document).ready(function() {
var template = $('#user-template').html();
for(var i in obj)
{
var info = Mustache.render(template, obj[i]);
$('#ModuleUserTable').html(info);
}
});
模板:
<script id="user-template" type="text/template">
<td>{{FullName}}</td>
<td>{{WorkEmail}}</td>
</script>
{{FullName}}
{{WorkEmail}}
表:
<table border="1">
<tr>
<th>FullName</th>
<th>WorkEmail</th>
</tr>
<tr id = "ModuleUserTable">
</tr>
</table>
全名
工作电子邮件
我发现
$('#ModuleUserTable').html(info);
应该是:
$('#ModuleUserTable').append(info);
模板应为:
<script id="user-template" type="text/template">
<tr>
<td>{{FullName}}</td>
<td>{{WorkEmail}}</td>
</tr>
</script>
{{FullName}}
{{WorkEmail}}
和ID不应位于表行标记上。相反,它应该放在桌子上:
<table border="1" id = "ModuleUserTable>
<tr>
<th>FullName</th>
<th>WorkEmail</th>
</tr>
</table>
<代码> 在您自己的解决方案中,您应该考虑使用SuthAuthor为您重复行:
<script id="user-template" type="text/template">
{{#people}}
<tr>
<td>{{FullName}}</td>
<td>{{WorkEmail}}</td>
</tr>
{{/people}}
</script>
var text = '[{"Fullname":"John", "WorkEmail":"john@gmail.com"},{"Fullname":"Mary", "WorkEmail":"mary@gmail.com"}]'
var obj = {people: JSON.parse(text)};
$(document).ready(function() {
var template = $('#user-template').html();
var info = Mustache.render(template, obj);
$('#ModuleUserTable').html(info);
});