Handlebars 通过特定索引值访问嵌套数组值

Question

我知道之前可能会询问如何访问，我想知道的是如何以某种模式获取它，因为我是 Handlebars 的新手。

所以我有一个json 数据如下。

    "value": [
      {
        "tos": [
              {
                  "emailAddress": {
                      "name": "random random1",
                      "address": "random.r@random.com"
                  }
              },
              {
                  "emailAddress": {
                      "name": "abcd xyz",
                      "address": "abcd.x@radom.com"
                  }
              }
          ]
      },
      {
        "tos": [
              {
                  "emailAddress": {
                      "name": "random2 random2",
                      "address": "random2.r@random2.com"
                  }
              },
              {
                  "emailAddress": {
                      "name": "qwer zxc",
                      "address": "qwer.z@radom2.com"
                  }
              }
          ]
      }

   ]

我想要的是通过以下方式获取该名称和地址。 name(emailAddress)

<table>
    <tr>
     <th>Tos</th>
    <tr>
    <tr>
      <td>random random1(random.r@random.com)<br>
          abcd xyz(abcd.x@radom.com)
      </td>
   </tr>
   <tr>
      <td>random2 random2(random2.r@random2.com)<br>
          qwer zxc(qwer.z@radom2.com)
      </td>
    </tr>
</table>

到目前为止我尝试过的是......

<tr>
{{#each messages}}
 {{#each this.tos}}
  {{#each this.emailAddress}}
    <td>{{this.name}}({{this.address}})</td>
  {{/each}}
 {{/each}}
{{/each}}
</tr>

但我运气不佳，我也尝试过...... {{this.[1]}} 或 {{emailAddress.name}} 或 {{name}}

那么任何人都可以帮助我如何实现它？

Answer 1

首先，我会从模板中删除{{#each this.emailAddress}} 行。这将遍历每个 emailAddress 对象的每个属性 - 即 .name 和 .address。

{{#each this.tos}}
    <td>
        {{this.emailAddress.name}}(this.emailAddress.address)}}
    <td>
{{/each}}

上面将输出我们想要的数据，但会将每个emailAddress 放在自己的<td> 中。但是，您的预期输出将每个 tos 数组中的所有 emailAddresses 都包含在由 <br> 分隔的单个 <td> 内。我们可以使用 Handlebars 的 @last data variable 有条件地为 tos 数组中除最后一项之外的每一项呈现 <br>：

{{#each messages}}
    <tr>
        <td>
            {{#each this.tos}}
                {{this.emailAddress.name}}({{this.emailAddress.address}})
                {{#if @last}}{{else}}<br>{{/if}}
            {{/each}}
        </td>
    </tr>
{{/each}}

请注意，<td> 必须包含 {{each this.tos}}，以便 tos 中的对象在单个 <td> 中呈现。此外，由于我们希望messages 中的每个对象都有一个<tr>，因此我们必须将<tr> 移动到{{#each messages}} 行内。

我创建了一个JS Fiddle 供您参考。