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 数组中的所有 emailAddress 都位于由 <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供您参考。

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

Handlebars access nested array values by specific index's value

html

json

node.js

handlebars.js