如何在HTML中循环JavaScript对象?
作者:互联网
我想遍历一个JavaScript对象并重复一个html脚本,与对象长度一样多次.
在这里,我在脚本标记中有以下内容
<script>
var obj;
ipcRenderer.on('requests-results', (event, hosSchema) => {
obj = hosSchema
})
</script>
obj是从Mongo数据库检索的数组,如下图所示:
我在< body>里面有以下内容标签:
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="card">
<div class="card-content">
<span class="card-title">.1.</span>
<p>.2.</p>
</div>
<div class="card-action">
<a href="#">.3.</a>
<a href="#">.4.</a>
</div>
</div>
</div>
</div>
如何循环obj以重复< div>之间的代码标记为obj.length的次数?
解决方法:
我建议你使用@Amit提到的Handlebars.
首先移出里面的代码< div id =“page-inner”>如下:
<div id="page-inner">
</div>
<script id= "requests-template" type="text/x-handlebars-template">
<div class="row">
{{#each requests}}
<div class="col-md-4 col-sm-4">
<div class="card">
<div class="card-content">
<span class="card-title">{{this.fieldName}}</span>
<p>{{this.fieldName}}</p>
</div>
<div class="card-action">
<a href="#">{{this.fieldName}}</a>
<a href="#">{{this.fieldName}}</a>
</div>
</div>
</div>
{{/each}}
</div>
</script>
然后在text / javascript类型的另一个脚本页面中创建请求并将obj / hosSchema分配给它,如下所示:
<script type="text/javascript">
var requestInfo = document.getElementById('requests-template').innerHTML;
var template = Handlebars.compile(requestInfo);
var requestData = template({
requests: obj
})
$('#page-inner').html(requestData);
</script>
注意:您需要安装车把包(npm安装车把 – 保存)
标签:jquery,javascript,electron,html,script-tag 来源: https://codeday.me/bug/20190705/1390679.html