[英]How to loop through JavaScript object in HTML?
I want to loop through a JavaScript
object and repeat an html
script as many times as the object length. 我想遍历一个
JavaScript
对象,并重复一个html
脚本与对象长度一样多。
Here, I have the following in a script tag 在这里,我在脚本标签中有以下内容
<script>
var obj;
ipcRenderer.on('requests-results', (event, hosSchema) => {
obj = hosSchema
})
</script>
obj
is an array retrieved from Mongo
database as the picture below shows: obj
是从Mongo
数据库检索的数组,如下图所示:
and I have the following inside <body>
tag: 并且我在
<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>
How can I loop through obj
to repeat the code between <div>
tag as many times as obj.length
? 如何遍历
obj
以在<div>
标记之间重复代码与obj.length
一样多?
I would suggest you to use Handlebars
as @Amit mentioned. 我建议您使用@Amit提到的
Handlebars
。
first move out the code inside <div id="page-inner">
as below: 首先移出
<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>
Then inside another script page of type text/javascript
you create the requests and assigned obj/hosSchema
to it as below: 然后在另一个类型为
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>
NOTE: you need handlebars
package installed ( npm install handlebars --save
) 注意:您需要安装
handlebars
软件包( npm install handlebars --save
)
Use templating script like Handlebars.js, Mustache.js or underscore.js. 使用模板脚本,例如Handlebars.js,Mustache.js或underscore.js。 Check below link for more description.
检查下面的链接以获取更多描述。
http://www.creativebloq.com/web-design/templating-engines-9134396 http://www.creativebloq.com/web-design/templating-engines-9134396
Try this: 尝试这个:
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.