javascript - 如何循环遍历 HTML 中的 JavaScript 对象？-6ren

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

转载作者：搜寻专家更新时间：2023-10-31 08:51:13

我想遍历 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 ？

最佳答案

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

关于javascript - 如何循环遍历 HTML 中的 JavaScript 对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45626303/