Доступ к ребенку ребенка в JSON с Handlebars.js

Question

У меня нет проблем с доступом к исходному дочернему объекту родительского объекта в json, однако я не могу понять, какой формат для доступа к ребенку ребенок есть. В настоящее время я использую точечную нотацию, как описано в документации handlebars.js.

Мой HTML с handlebars.js реализованных (далее 'Тарифы' не отображаются правильно, они отображаются как [объект Object]):

{{#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

Это не «ребенок ребенка», к которому у вас возникли проблемы с доступом, но свойство sibling, относящееся к типу массива.

В вашем примере есть две проблемы. First, fees находится на таком же уровне, как company_base. Когда вы находитесь в тегах {{#company_base}} {{/company_base}}, вы находитесь в контексте объекта company_base, поэтому необходимо установить уровень один, чтобы получить доступ к его братьям и сестрам. Правильный путь: {{../fees}}.

Вторая проблема заключается в том, что 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}} 

Примечание: Я выбор в пользу более явной {{#each options}} над {{#options}}.

Я создал пример скрипки here.