如何循环浏览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对象？

回答

相关问题