Handlebars display object property dynamically by property name

Question

{{#each modelItems as |item|}}
<tr>
    <td>
        {{ item.name }}
    </td>
    {{#each selectedColumns as |extraCol|}} // line 27
        <td>
            {{ extraCol }}
            {{ item[concat '"' extraCols '"'] }} // what I tried
            {{ item[(concat '"' extraCols '"')] }}
        </td>
    {{/each}}
</tr>
{{/each}}

In the template I have a list of modelItems. In the table there are some certain columns displayed but there also might be optional ones in the selectedColumns list. As line 27 I am looping through selectedColumns to display them but no luck. How is it possible Handlebars to display object property dynamically by property name?

in JS it would something like

foreach (items in selectedColumns) {
    console.log(item.name);
    foreach (column in selectedColumns) {
        console.log(item['"'+column+'"']);
    }
}

Answer 1

With the get helper you can access a property of an object dynamically. If you combine this with the subexpressions of handlebars, you can still use the concat helper as well.

Your code would look something like:

{{#each modelItems as |item|}}
<tr>
    <td>
        {{ item.name }}
    </td>
    {{#each selectedColumns as |extraCol|}}
        <td>
            {{get item (concat '"' extraCol  '"')}}
        </td>
    {{/each}}
</tr>
{{/each}}