logo标签列表

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

javascriptjqueryhtmlelectronscript-tag
3
我希望能遍历一个JavaScript对象，并且根据对象长度重复执行一个html脚本。
在此我有以下内容于script标签中：
<script>
  var obj;

  ipcRenderer.on('requests-results', (event, hosSchema) => {
    obj = hosSchema
  })
</script>

obj是从Mongo数据库检索出来的数组，如下图所示：

enter image description here

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

1
使用JavaScript中的json.parse，然后进行for循环。这是问题吗？ - Amit Kumar Singh
从技术上讲，JSON.parse()将把JSON转换为JavaScript对象。返回数据的格式是包含JSON对象的JSON。请参见：http://json.org/和https://www.w3schools.com/js/js_json.asp。 - Donald Powell
如果你想循环遍历HTML中的一个对象，那么为什么要标记jQuery呢？ - Shiladitya
3个回答
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）
0
0

试试这个：

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);
}
编辑了一下，我忘了一个括号。哎呀。 - Jacob Gaiski
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接