如何在 HTML 中循环遍历 JavaScript 对象？答案

【问题标题】：How to loop through JavaScript object in HTML?如何在 HTML 中循环遍历 JavaScript 对象？
【发布时间】：2018-01-19 10:42:33
【问题描述】：

我想循环一个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 一样多次？

【问题讨论】：

使用 json.parse。然后是 javascript 中的 for 循环。是这个问题吗？
技术上 JSON.parse() 会将 JSON 转换为 JavaScript 对象。返回数据的格式是包含 JSON 对象的 JSON。见：json.org 和 w3schools.com/js/js_json.asp
如果您想在HTML 中循环访问object，那么为什么要标记jQuery？

标签： javascript jquery html electron script-tag

【解决方案1】：

我建议你使用@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)

【讨论】：

【解决方案2】：

使用 Handlebars.js、Mustache.js 或 underscore.js 等模板脚本。查看以下链接了解更多说明。

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

【讨论】：

【解决方案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);
}

【讨论】：

已编辑，我忘了括号。哎呀。