Question

我想循环遍历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多次？

Answer 1

我建议您使用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）

Answer 2

使用Handlebars.js，Mustache.js或underscore.js等模板脚本。请查看以下链接以获取更多说明。

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

Answer 3

试试这个：

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

如何在HTML中循环JavaScript对象？

3 个答案: