如何使用把手在表格中呈現數據？

Question

我試圖弄清楚如何使用把手在表中呈現一些數據。

我已經有標題的部分了。 我這樣做是這樣的：

<thead>
    <tr>
        {{#each chart.table-header}}
            <th>
                {{#if th-image.length}}
                    <p><img src="/assets/images/{{th-image}}" alt=""></p>
                {{/if}}
                <strong>{{{th-title}}}</strong>
                <p>{{{th-description}}}</p>
            </th>
        {{/each }}
    </tr>
</thead>

這是我的chart.json：

{
    "table-header" : [
      {
        "th-title": "",
        "th-description": "",
        "th-image": "",
        "special-case": ""
      },
      {
        "th-title": "Online Investing",
        "th-description": "Make more informed...",
        "th-image": "MESDicon.png",
        "special-case": ""
      },
      {
        "th-title": "Merrill Edge Guided Investing",
        "th-description": "Go online to...",
        "th-image": "MEGIicon.png",
        "special-case": ""
      },
      {
        "th-title": "Invest with an advisor",
        "th-description": "Get professional...",
        "th-image": "MEACicon.png",
        "special-case": ""
      }
    ],

    "table-body" : [
      {
          // HERE GOES THE INFO FOR THE TBODY ELEMENT.
      }
    ]
}

但是對於其余的tbody部分，我不知道如何呈現其余信息。 它看起來應該像這樣：

但是想法是渲染來自chart.json文件的數據。

<tbody>
   <tr>
        <td>Investing method</td>
        <td>Online</td>
        <td>Online with professional portfolio management</td>
        <td>With an advisor</td>
    </tr>
    <tr>
        <td>Simple, straight-forward pricing</td>
        <td><strong>$6.95 online equity & ETF trades<sup>3</sup></strong><br>(Qualify for $0 trades with Preferred Rewards)<sup>2</sup> Other fees may apply<sup>3</sup> </td>
        <td><strong>0.45% annual fee</strong><br>Other fees may apply</td>
        <td><strong>0.85% annual program fee</strong><br>Other fees may apply</td>
    </tr>
    <tr>
     <td>Minimum investment</td>
        <td><strong>None</strong></td>
        <td><strong>$5,000</strong></td>
        <td><strong>$20,000</strong></td>
    </tr>
    <tr>
        <td>Investment choices</td>
        <td><strong>Full range of investments</strong></td>
        <td><strong>A set of ETF strategies</strong></td>
        <td><strong>A set of mutual fund/ETF strategies</strong></td>
    </tr>
    <tr>
        <td>Bank & invest with one login</td>
        <td>&#10003;</td>
        <td>&#10003;</td>
        <td>&#10003;</td>
    </tr>

</tbody>

有什么建議么？

Answer 1

因為您的表主體是對象數組。 您可以循環瀏覽並使用鍵訪問數據。

<thead>
    <tr>
        {{#each chart.table-header}}
            <th>
                {{#if th-image.length}}
                    <p><img src="/assets/images/{{th-image}}" alt=""></p>
                {{/if}}
                <strong>{{{th-title}}}</strong>
                <p>{{{th-description}}}</p>
            </th>
        {{/each }}
    </tr>
</thead>

  <tbody>

   {{#each chart.table-body}}

      <tr>
       <td>{{this.your_key}}</td>
       <td>{{this.your_key}}</td>
       <td>{{this.your_key}}</td>
       <td>{{this.your_key}}</td>
      </<tr>

   {{/each}}

</tbody>

Answer 2

使用下面的代碼片段可解決此問題：

<thead>
    <tr>
        {{#each table-header}}
            <th>
                {{#if th-image.length}}
                    <p><img src="/assets/images/{{th-image}}" alt=""></p>
                {{/if}}
                <strong>{{th-title}}</strong>
                <p>{{th-description}}</p>
            </th>
        {{/each }}
    </tr>
</thead>

<tbody>
    {{#each table-body}}
        <tr>
             <td>{{key1}}</td>
             <td>{{key2}}</td>
             <td>{{key3}}</td>
             <td>{{key4}}</td>
        </<tr>
    {{/each}}
</tbody>