How to access data inside nested loop in Handlebars?

Question

I have data as follows where keyPairs is dynamic columns of a table and data has the row data.

keyPairs: {
"key0":"Value0",
"key1":"Value1",
    ...
}

data:[
{
"name":"name0",
"key0":"Value0",
"key1":"---",
},

{
"name":"name1",
"key0":"---",
"key1":"Value1",
}]

The keyPairs object is dynamically created, and the keys used in each object in the data array are the same as the keys in keyPairs. I am unable get the values for each data item with each @key from keyPairs.

{{#each data as | row |}}
    <td>
        {{row.name}}
    </td>

{{#each ../keyPairs}}
    <td>
        {{./row[@key]}}
    </td>
{{/each}}
{{/each}}

76484 · Accepted Answer · 2021-01-12 12:24:10Z

1

I see a few problems.

First, you are trying to step-up a context-level from within your #each using ./row. However, the correct syntax for this is two dots, ../row.

Secondly, when you step-up a context-level, by using ../row you are trying to access a row property on the parent context. But the parent does not have a row property because the parent is the row object. So the correct reference would be .. instead of ../row.

Third, Handlebars does not support dynamic key evaluation with square brackets. You need to use the lookup helper to do this evaluation, {{lookup .. @key}}.

I have created a fiddle for your reference.

answered Jan 12, 2021 at 12:24

76484

9,0013 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sahyog Vishwakarma Over a year ago

thanks for your answer. but I had already done with it by self with some hit and trials.

76484 Over a year ago

@SahyogVishwakarma: That's great! For the future, I would recommend posting your solution so that those with the same issue can learn from it and potential responders will know you no longer need their help.

Sahyog Vishwakarma · Accepted Answer · 2021-01-12 15:50:41Z

0

First of all, Thanks @76484 for your answer. Second I had got my answer on my own, and its quite similar to answer given by him. I achieved the solution to my question with the following syntax.

{{#each data as | row |}}
    <td>
        {{row.name}}
    </td>

{{#each ../keyPairs}}
    <td>
        {{lookup row @key}}
    </td>
{{/each}}
{{/each}}

answered Jan 12, 2021 at 15:50

Sahyog Vishwakarma

4401 gold badge3 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to access data inside nested loop in Handlebars?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related