如何循环遍历 HTML 中的 JavaScript 对象？

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.js、Mustache.js 或 underscore.js 等模板脚本。查看下方 link 了解更多说明。

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

Answer 2

试试这个：

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

Answer 3

我建议您使用@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，如下所示：

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

如何循环遍历 HTML 中的 JavaScript 对象？

How to loop through JavaScript object in HTML?

html

javascript

jquery

script-tag

electron