如何在HTML中遍历JavaScript对象？
[英]How to loop through JavaScript object in HTML?
问题描述
我想遍历一个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一样多？
3 个解决方案
解决方案1
1 已采纳 2017-08-11 05:52:06
我建议您使用@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分配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>
注意：您需要安装handlebars软件包（ npm install handlebars --save ）
解决方案2
0 2017-08-11 03:07:03
使用模板脚本，例如Handlebars.js，Mustache.js或underscore.js。 检查下面的链接以获取更多描述。
http://www.creativebloq.com/web-design/templating-engines-9134396
解决方案3
0 2017-08-11 03:23:02
尝试这个：
var divlist = document.getElementsByTagName['div'];
var duplicate = null;
var rowIndex = -1;
var found = false;
for(var i = 0;i<obj.length;i++)
{
if(!found)
for(var p = 0;p<divlist.length;p++)
{
if(rowIndex != -1 && duplicate != null)
{
//set a Boolean to true and break
found = true;
break;
}
if(divlist[p].className == "col-md-4 col-sm-4")
{
//copy the element
duplicate = divlist[p];
}
else if(divlist[p].className == "row")
{
//identify the row's index
rowIndex = p;
}
}
//append the duplicate
divlist[rowIndex].appendChild(duplicate);
}
如何遍历javascript对象并在html中显示值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.