access parent sub array key handlbars

Question

I have the following array / sub array structure

"filters": {
    "types": {
        "34": "Ford",
        "22": "Jeep",
        "18": "Porsche",
    },
    "locations": [
        "Earth",
        "Mars",
        "Moon",
    ]
}

and the following handlebars template

{{#if filters}}
    {{#each filters}}
        <div class="cars">
            <ul class="cars__list">
                <li class="cars-{{@key}}__title">Filter by {{@key}}:</li>
                <li class="cars-{{@key}}__filters">
                  <ul>
                    <li class="cars-{{@key}}">View All</li>
                    {{#each this}}
                        <li class="cars-{{*want to access filters[key]*}} color={{@key}}">{{this}}</li>
                    {{/each}}
                   </li>
                </li>
            </ul>
        </div>
    {{/each}}
{{/if}}

I'm having trouble accessing the filters[types] and filters[locations] within the each this loop.

In my CSS I'm using a classes called .cars-type and .cars-location. I want to be able to style each list separately and unfortunately target each li with a class. I want to apply these styles within the each this loop.

I can do it within the filters loop by using {{@key}} but not in the each this loop

I've tried

<li class="cars-{{../filters}}">{{this}}</li>

but this just returns the car type like ford - I want the key ie. '34' in this case

<li class="cars-{{lookup ../filters @index}}">{{this}}</li>

using handlebars helper lookup but again no luck

<li class="cars-{{../this}}">{{this}}</li>

and the above which gives me [object Object]

I've checked out handlebars - is it possible to access parent context in a partial?, handlebars.js: relative paths in partials not working and Lookup helper in handlebars but no luck with any of the solutions

EDIT Here's the HTML output that I want to produce

<div class="cars">
    <ul class="cars__list">
        <li class="cars-types__title">Filter by types:</li>
        <li class="cars-types__filters">
          <ul>
            <li class="cars-types">View All</li>
            <li class="cars-types color-34">Ford</li>
            <li class="cars-types color-22">Jeep</li>
            <li class="cars-types color-18">Porsche</li>
          </ul>
        </li>
    </ul>
    <ul class="cars__list">
       <li class="cars-locations__title">Filter by locations:</li>
       <li class="cars-locations__filters">
          <ul>
            <li class="cars-locations">View All</li>
            <li class="cars-locations color-0">Earth</li>
            <li class="cars-locations color-1">Mars</li>
            <li class="cars-locations color-2">Moon</li>
          </ul>
       </li>
    </ul>
</div>

There seems to be some confusion here. filters["types"] is an object; it doesn't make sense to build a class name with it. I think you should provide your desired HTML result. Then someone here will be happy to help you. — 76484

76484 76484 · Accepted Answer · 2016-05-28T00:58:06

You should reconsider your HTML because a ul cannot be a direct child of another ul. See https://developer.mozilla.org/en/docs/Web/HTML/Element/ul#Usage_context

With that said, we can solve your problem. The Handlebars docs have our answer:

Nested each blocks may access the interation variables via depth based paths. To access the parent index, for example, {{@../index}} can be used.

Therefore, your problematic line should look like the following:

<li class="cars-{{@../key}} color-{{@key}}">{{this}}</li>

access parent sub array key handlbars

1 Answers