Dynamic property query in handlebars

Question

I am trying to get a property of an object in handlebars dynamically dependent upon the pid that the #each loop is currently on. I have tried the following code but the value isn't getting populated at all. I'm imagining there's some sort of context problem, but as I'm quite new to handlebars, I don't know the way to go about doing this.

<div class="card-deck">
        {{#each entries}}
                {{! backend only hidden comments}}
                <div class="card">
                        <img class="card-img-top img-fluid" src="/userimgres/{{pid}}/0.jpg" alt="Card image cap">
                        <div class="card-body">
                                <h5 class="card-title"><strong>{{name}}</strong></h5>
                                <p class="card-text">{{desc}}</p>
                        </div>
                        <div class="card-footer">
                                <small class="text-muted">Posted {{../ago.[pid]}} ago (ID: {{pid}})</small>
                        </div>
                </div>
        {{/each}}
</div>

My ago object is setup with the key as the pid and the value as a string describing, in human readable format, how long it's been since a specified date/time. For what it's worth, it's generated by a separate function from a constant object, hence why it's not in the same object to begin with. It looks like this:

{
  '1000': '2 hours ago',
  '1001': 'a month ago',
  '1002': '3 days ago',
  '2000': '4 days ago',
  '2001': '12 days ago',
  '2002': '4 months ago',
  '2003': 'a month ago'
}

When I change the code to be static and query {{../ago.[1001]}}, I receive my string for that specific ID. Since the code relies on a for each, however, this obviously returns the same exact string for the other entries.

How can I modify this statement to dynamically query the ago object for a key's value - the key being defined by the pid that is currently being iterated through in the #each (i.e. what I'm doing elsewhere in this codeblock by simply calling {{pid}})?

I have tried {{../ago.[{{pid}}]}} and several other arrangements but none seem to work. Many thanks in advance for any help, and I'm happy to clear anything up if this is unclear.

The linked documentation to the lookup helper there got me where I needed to be. Thanks! I'll answer my own question in case anyone stumbles across this. — drcomputer, May 23 '20 at 21:19

score 2 · Accepted Answer · answered May 23 '20 at 21:43

You must use the lookup helper as documented here

From the docs:

The lookup helper allows for dynamic parameter resolution using Handlebars variables. This is useful for resolving values for array indexes.
{{#each people}}
  {{.}} lives in {{lookup ../cities @index}}
{{/each}}```

In the instance of this question, you can simply change this example from using the current index to use a variable (in this case pid) located in the same context that the #each loop is in.

{{lookup ../ago pid}} should work for you. It gets the object ago from the parent context, then based off the #each loop's current iteration of entries.pid, it gets the value from ../pid for the key of pid it's on.

In other situations, you may need to continue reading the documentation linked in this answer for other ways of using the locate helper:

It can also be used to lookup properties of object based on data from the input. The following is a more complex example that uses lookup in a sub-expression to change the evaluation context to another object based on a property-value.
{{#each persons as | person |}}
  {{name}} lives in {{#with (lookup ../cities [resident-in])~}}
    {{name}} ({{country}})
  {{/with}}
{{/each}}

Dynamic property query in handlebars

1 Answers1