如何在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.