Accessing another variable with contents of each loop

Question

The data being passed into the handlebars template looks like this:

a = {
    x: {
       name: "xavier"
    },
    y: {
       name: "yamal"
    },
}

b = {
    properties: {
        x: {
            property: "number"
        }
    }
}

Handlebars template looks like this:

<div class="left-panel">
    {{a.x.name}} // Prints correctly "xavier"
    {{#each b.properties}}
        <h4>{{@key}}</h4> // Prints correctly "x"
        <h4>{{ ../a.[@key].name }}</h4> // does not print "xavier"
    {{/each}}
</div>

As you can see, I want to be able to access the name of a dict in a using the key in b. How can I achieve this?

I may be wrong, but I reckon you may need to create your own helper function to achieve this. I believe the reason it's not working in this context is because @key is being used as a 'string' (i.e. "x"), rather than a reference to attribute 'x' — Mo A, Jan 19 '19 at 10:25

score 0 · Answer 1 · answered Jan 20 '19 at 06:21

Your question is essentially the same as this one: Handlebars.js - Access object value with a variable key

The only extra detail is that you will need to make use of Handlebars subexpressions in order to perform the two lookups (first of @key; then of 'name').

A subexpression will allow you to lookup the value of @key on ../a and pass that to a second lookup of the value of 'name' on the result of the first lookup.

The relevant line in your template becomes:

<h4>{{lookup (lookup ../a @key) 'name'}}</h4>

Here is a fiddle for your reference: https://jsfiddle.net/76484/b0puy52n/

Accessing another variable with contents of each loop

1 Answers1

Linked