如何循環瀏覽HTML中的JavaScript對象？

我想遍歷一個JavaScript對象，並重復一個html腳本的次數爲對象長度。如何循環瀏覽HTML中的JavaScript對象？

在此，我已在在腳本標籤

<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？

來源

2017-08-11 mazin

使用json.parse。然後在javascript中進行循環。這是個問題嗎？ – Amit

從技術上講，JSON.parse（）將把JSON變成一個JavaScript對象。數據返回的格式是包含JSON對象的JSON。請參閱：http：//json.org/和https://www.w3schools.com/js/js_json.asp –

如果您想循環訪問HTML中的'object'，那麼爲什麼您已經標記了'jQuery' ？ – Shiladitya

我會建議你使用Handlebars作爲@Amit提及。

第一搬出裏面<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>

注意：你需要安裝handlebars包（npm install handlebars --save）

來源

2017-08-11 05:52:06

謝謝！你救了我的一天！ – mazin

使用模板腳本，如Handlebars.js，Mustache.js或underscore.js。點擊查看下方鏈接瞭解更多描述。

http://www.creativebloq.com/web-design/templating-engines-9134396

來源

2017-08-11 03:07:03 Amit

試試這個：

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); 
}

來源

2017-08-11 03:23:02

編輯，我忘了一個括號。哎呦。 –

如何循環瀏覽HTML中的JavaScript對象？

回答

相關問題