使用Handlebars.js访问JSON中的孩子

时间:2017-01-31 20:00:41

标签: json handlebars.js

我在json中访问父对象的初始子节点没有问题,但是,我似乎无法弄清楚访问子节点的格式是什么。我正在使用handlebars.js文档中描述的点表示法。

我的html与handlebars.js实现('费用'没有正确显示,它们显示为[对象对象]):

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

1 个答案:

答案 0 :(得分:2)

不是孩子的孩子&#34;您访问时遇到问题,但是属于数组类型的兄弟属性。

您的示例有两个问题。首先,feescompany_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