Question

我对Node，Express，Handlebars等并不陌生，我正尝试使用NodeJS和Express-Handlebars构建动态下拉菜单。

这就是我的数据

var dropdownCategory = [
  {title:"Title", dropdownItem: [{title: "1"}, {title: "2"}]}, 
  {title: "Other title", dropdownItem: [{title: "3"}, {title: "4"}]}]

这是我目前在快速车把中对其进行迭代的方式：

{{# each dropdownCategory}}
  <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle = "dropdown">
    {{title}}
     </a>
     {{# each dropdownItem}}
     <div class="dropdown-menu">
       <a href="/{{title}}" class="dropdown-item">{{title}}</a>
     </div>
     {{else}}
     {{/each}}
  </li>
{{else}}
(...)
{{/each}}

我总是只从dropdownItem获得第一个标题。感谢您对此的投入。我认为这是在对象中嵌套第二个数组的问题，但是老实说我不知道如何解决它。谢谢！

Answer 1

首先让它遍历dropdownCategory并记录下来以查看：

{{# each dropdownCategory}}
       {{log this}}
    {{/each}}

在控制台中，您应该看到以下内容：

{title:"Title", dropdownItem: [{title: "1"}, {title: "2"}]}, 
  {title: "Other title", dropdownItem: [{title: "3"}, {title: "4"}]}

现在我们必须在“此” 内部进行迭代。

{{# each dropdownCategory}}
       {{#each this.title}} //instead of "this.title", "this" or "." also correct
            {{this}}
          {{/each}}
    {{/each}}

您始终可以使用“ log”帮助方法进行记录。我把html部分留给了你:)你可以装饰你想要的方式。希望对您有帮助

如何在Express-Handlebars中的数组内的对象内的嵌套数组上进行迭代？

1 个答案: