Handlebars.jsを使用してJSON内の子の子にアクセスする

Question

jsonで親オブジェクトの最初の子にアクセスするのに問題はありませんが、子にアクセスするための形式はわかりません子供がいる。私は現在、handlebars.jsのドキュメントに記載されているようにドット表記を使用しています。

（ '手数料' は、彼らが[オブジェクトのオブジェクト]として表示、正しく表示されない）に実装handlebars.jsと私のHTML：

{{#options}} 
    {{#company_base}} 
    <div> 
     <h1>{{name_full}}</h1><b>AM Best Rating</b>: {{ambest_rating}} 

     <p><b>Type</b>: {{business_type}}</p> 

     <p><b>Fees</b>: 
      <ol> 

       <li><b>Type</b>: {{../..options.fees.type}}</li> 
       <li><b>Name</b>: {{../..options.fees.name}}</li> 

      </ol> 
     </p> 
    </div> 
    {{/company_base}} 
    {{/options}} 

マイモックJSON：

{ 
"options": [{ 
    "company_base": { 
     "business_type": "Life, Accident, and Health", 
     "established_year": 1998, 
     "med_supp_state_market_data": [{ 
      "market_share": 0.63490064689900005, 
      "state": "AK", 
      "lives": 8041, 
      "premiums": 14714825, 
      "claims": 11649263 
     }, { 
      "market_share": 0.34445359987700003, 
      "state": "WY", 
      "lives": 14916, 
      "premiums": 30178554, 
      "claims": 24281001 
     }], 
     "underwriting_data": [], 
     "med_supp_national_market_data": { 
      "market_share": 0.315510079562, 
      "state": null, 
      "lives": 3723184, 
      "premiums": 8276072271, 
      "claims": 6436017316 
     }, 
     "customer_complaint_ratio": 0.0013368044250809999, 
     "ambest_outlook": "Stable", 
     "name_full": "Major Health Partners of the Wind", 
     "ambest_rating": "A", 
     "parent_company": "aghzfmNzZ2sdfZWRfc3VwcA", 
     "last_modified": "2017-01-16T12:28:17.591830", 
     "customer_satisfaction_ratio": 0.83666666666699996, 
     "default_resources": { 
      "final-expense-life": { 
       "e_app_link": "" 
      }, 
      "medicare-advantage": { 
       "e_app_link": "" 
      }, 
      "medicare-supplement": { 
       "e_app_link": "sdf" 
      }, 
      "hospital-indemnity": { 
       "e_app_link": "" 
      }, 
      "dental": { 
       "e_app_link": "" 
      } 
     }, 
     "key": "assdfsdfVwcA", 
     "parent_company_base": { 
      "established_year": 1998, 
      "code": "707", 
      "name": "Space Insurance", 
      "key": "asfdf", 
      "last_modified": "2016-11-11T16:42:52.240940" 
     }, 
     "sp_rating": "AA-", 
     "naic": "79413", 
     "type": "STOCK", 
     "name": "Spacewomen Insurance" 
    }, 
    "has_pdf_app": true, 
    "rate": { 
     "quarter": 23841, 
     "annual": 92964, 
     "semi_annual": 47682, 
     "month": 7747 
    }, 
    "rating_class": "Standard", 
    "fees": [{ 
      "name": "corgi discount", 
      "type": "buddy" 
    }]} 

Here is a live example of my issue。

Answer 1

ではありません。あなたがアクセスに問題がある「子の子」ではなく、配列タイプの兄弟プロパティです。

例には2つの問題があります。まず、feesはcompany_baseと同じレベルです。 company_baseオブジェクトのコンテキスト内にある{{#company_base}} {{/company_base}}タグ内にある場合、その兄弟にアクセスするには、レベルをステップアップする必要があります。正しいパスは{{../fees}}です。

2番目の問題は、feesが配列であることです。この配列には{{#each}}が必要かもしれませんが、最初のオブジェクトだけが必要な場合は、{{fees.0.type}}のようにアクセスできます。

これはあなたのテンプレートは以下で更新する必要があることを意味します：トリックを行う必要があります

<li><b>Type</b>: {{../fees.0.type}}</li> 
<li><b>Name</b>: {{../fees.0.name}}</li> 

。しかし、私はあなたのテンプレートを書く代わりの方法をお勧めしたいと思います。私はfeesオブジェクトを取得するレベルをステップアップする必要がなくなり、{{#company_base}} {{/company_base}}タグを削除します。これは、options配列内の現在のオブジェクトのレベルにあり、ドット表記を使用してその子孫プロパティにアクセスできることを意味します。

{{#each options}} 
    <div> 
     <h1>{{company_base.name_full}}</h1> 
     <b>AM Best Rating</b>: {{company_base.ambest_rating}} 
     <p><b>Type</b>: {{company_base.business_type}}</p> 
     <p> 
      <b>Fees</b>: 
      <ol> 
       <li><b>Type</b>: {{fees.0.type}}</li> 
       <li><b>Name</b>: {{fees.0.name}}</li> 
      </ol> 
     </p> 
    </div> 
{{/each}} 

注：私は{{#options}}上で、より明示的な{{#each options}}を選ぶのです更新されたテンプレートには、次のようになります。

私は例フィーダhereを作成しました。