如何迭代 Handlebars 中的对象？答案

【问题标题】：How to iterate objects in Handlebars?如何迭代 Handlebars 中的对象？
【发布时间】：2020-02-11 10:04:10
【问题描述】：

我有这样一个 json 文件。我下面的代码不起作用。如何在 Handlebars 中迭代“名称”？

 { "test": [ { "33": { "name": "Prova 1", "surname": "Federico" } }, { "34": { "name": "Prova 2", "surname": "Antonio " } }, { "35": { "name": "Prova 3", "surname": "Giovanni" } } ] }

 <div>
    {{debug}}
{{#each test}}
    
  <ul>
   <li>{{name}}</li>
  </ul>
 {{/each}}
</div>

【问题讨论】：

标签： handlebars.js

【解决方案1】：

您必须对数组中对象的第二个测试进行双重迭代以获取所有属性（我使用 {{this}} 因为名称每次都会更改），因为名称嵌套在另一个对象中：

{{#each test}}
  <ul>
   <li>{{#each this}}{{name}}{{/each}}</li>
  </ul>
 {{/each}}

如果你想让你给出的代码工作，你必须有这样一个 json ：

{ "test": [ 
{ "name": "Prova 1", "surname": "Federico" }, 
{ "name": "Prova 2", "surname": "Antonio " }, 
{ "name": "Prova 3", "surname": "Giovanni" } 
] }

您可以查看下面的 sn-p，它将用您的数据进行演示：

$(document).ready(function() {
  var context = {
    "test": [{
        "33": {
          "name": "Prova 1",
          "surname": "Federico"
        }
      },
      {
        "34": {
          "name": "Prova 2",
          "surname": "Antonio "
        }
      },
      {
        "35": {
          "name": "Prova 3",
          "surname": "Giovanni"
        }
      }
    ]
  };
  var source = $("#sourceTemplate").html();
  var template = Handlebars.compile(source);
  var html = template(context);
  $("#resultPlaceholder").html(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
<div>
{{#each test}}
  <ul>
   <li>{{#each this}}{{name}}{{/each}}</li>
  </ul>
 {{/each}}
</div>
</script>
<br/>
<div id="resultPlaceholder">
</div>

【讨论】：

如果是这样？ var context = { "test": [ { "33": [ { "name": "Prova 1", "surname": "Federico" } ] }, { "34": [ { "name": "Prova 1 ", "姓氏": "Federico" } ] }, { "34": [ { "name": "Prova 1", "surname": "Federico" } } ] };
您的解决方案效果很好，谢谢！但是如果json数据在外部文件中呢？
那么你必须先写一些东西来获取你的json，然后再提交给车把模板。
我用这个脚本解决了这个问题 var seasons_data_url = "working-data-file.json"; $(document).ready(function(){ $.getJSON(seasons_data_url, function (data) { var mysource = $('#sourceTemplate').html(); var mytemplate = Handlebars.compile(mysource); var myresult = mytemplate(data) $('#resultPlaceholder').html(myresult); }); });
是的，您在第一个表中添加了一个新表，因此您必须使用额外的每个循环再次迭代：{{#each test}}
- {{#each this} }{{#each this}}{{name}}{{/each}}{{/each}}
{{/each}}

【解决方案2】：

 <ul>{{#test}}<li>{{name}}</li>{{/test}}</ul>

试试这个

【讨论】：

这是在车把中迭代的方式
我复制并转换了一个外部 json 用于测试
没有解决办法吗？对象前面的数字有问题吗？