ハンドルバーを使用してテーブル内のデータをレンダリングするにはどうすればよいですか？

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>