使用 JSON 中的把手访问嵌套数组并循环答案

【问题标题】：Accessing nested array with handlebars from JSON and loop through使用 JSON 中的把手访问嵌套数组并循环
【发布时间】：2016-05-24 19:18:44
【问题描述】：

如何使用把手访问嵌套数组的结果？

我有这个虚拟数据：

var data = [{
    articles : [{
        id : '0',
        url : 'foo',
        title : 'Foo',
        body : 'some foo bar',
        category : 'foo',
        tags : [
            'foo'
        ]
    }, {
        id : '1',
        url : 'foo-bar',
        title : 'Foo bar',
        body : 'more foo bar',
        category : 'foo',
        tags : [
            'foo', 'bar'
        ]
    }, {
        id : '2',
        url : 'foo-bar-baz',
        title : 'Foo bar baz',
        body : 'more foo bar baz',
        category : 'foo',
        tags : [
            'foo',
            'bar',
            'baz'
        ]
    }]
}, {
    users : [{
        name: 'Admin'
    }, {
        name: 'User'
    }]
}];

这是我的模板文件：

{{#each data.[0].articles}}
<article class="id-{{this.id}}">
  <h1><a href="/journal/{{this.url}}">{{this.title}}</a></h1>
  <div class="category"><a href="/category/{{this.category}}">{{this.category}}</a></div>
  <p>{{this.body}}</p>
  <!--<div class="tags"><a href="/tags/{{this.tags}}">{{this.tags}}</a></div>-->
  <div class="tags">
    <ul>
      {{#each ../tags}}
      <li><a href="/tags/{{this}}">{{this}}</a></li>
      {{else}}
    </ul>
  </div>
</article>

{{else}}
<p class="empty">No content</p>
{{/each}}

如果我使用：

<div class="tags"><a href="/tags/{{this.tags}}">{{this.tags}}</a></div>

他们将作为一个整体插入。有没有办法一个一个地访问它们？

谢谢！

【问题讨论】：

标签： javascript arrays json handlebars.js each

【解决方案1】：

我的错，这是语法错误。我没有用{{/each}} 关闭每个嵌套，而是使用{{else}}。

{{#each data.[0].articles}}
<article class="id-{{this.id}}">
  <h1><a href="/journal/{{this.url}}">{{this.title}}</a></h1>
  <div class="category"><a href="/category/{{this.category}}">{{this.category}}</a></div>
  <p>{{this.body}}</p>
  <!--<div class="tags"><a href="/tags/{{this.tags}}">{{this.tags}}</a></div>-->
  <div class="tags">
    <ul>
      {{#each tags}}
      <li><a href="/tags/{{this}}">{{this}}</a></li>
      {{/each}}
    </ul>
  </div>
</article>

{{else}}
<p class="empty">No content</p>
{{/each}}

【讨论】：