如何在HTML中循环JavaScript对象？

2024年1月1日 209次阅读

我想遍历一个
JavaScript对象并重复一个html脚本,与对象长度一样多次.

在这里,我在脚本标记中有以下内容

<script>
  var obj;

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

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

《如何在HTML中循环JavaScript对象？》

我在< 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的次数？

最佳答案 我建议你使用@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>

注意：您需要安装车把包(npm安装车把 – 保存)

点赞