Nested {{each}} loops: context/scope is messed up when current iteration values are equal

[jeremyfifty9]

Think I've encountered a bug. If you have a nested each (i.e., an each within an each), in any iteration where the parent loop's current value is equal to the child loop's current value, the context/scoping appears to be off. To illustrate:

{{#each arr1}}
    {{#each arr2}}
        <!--

        If {{@this}} equals {{@../this}}, then {{@this}} actually appears to be
        referencing to {{arr1[@key]}} rather than {{arr2[@key]}}
        
        -->
    {{/each}}
    <br>
{{/each}}

I recognize that's confusing to follow, so I've made two examples that examine the issue through another lense. See https://jsfiddle.net/9D88g/73/ (where we try to access the same variable we're iterating through; if the scope is messed up, outputs an X) and https://jsfiddle.net/9D88g/74/ (where we try to access another variable). In the second example, if you change the conditional and output where I write ../../word to ../word, you'll notice it works the opposite way.

I've examined this further and the issue persists for any nested each where the current values of the parent and child are equal. The examples I show use the same array, but if we use arrays with different values the problem still occurs.

This is not an issue in Handlebars <4.0.0.

[nknapp]

Yes, this looks like a bug. I have changed the jsfiddle a little to make it clearer:
https://jsfiddle.net/9D88g/75/ When both values are the same, .. jumps on context too low.

[doowb]

This is being caused by this piece of code...

If the previous context is the same as the current context, then the context is not pushed onto the depths array.

In your case, since the strings are equal in the different each loops, Handlebars sees that as being the same depth.

This was originally added so that helpers like {{#if}}, that use the same context, won't change the depth requiring people to use {{../}} inside the block.

This is just information I discovered while researching how the context changes in block helpers... I don't have any ideas for a fix yet.

[nknapp]

I have thought about a fix for this bug quite often now, but I don't have any good idea, but I have a workaround...
Use: {{#with obj as |obj|}} (https://jsfiddle.net/9D88g/133/)

[bjmercado]

hello guys i am learning node/express right now, the code above wont work for me i am using express-handlebars, can you help me? Is this possible with express-handlebars? here's my code. the gpareaData is iterating but the branch is not

{{#each gpareaData}}
  <tr>
    <td>
       <select class="form-control" name="gp_branch[]">
           <option value="{{id}}">{{desc}}</option>
             {{#each branch}}
           <option value="{{id}}">{{branch_desc}}</option>
             {{/each}}
       </select>		
     </td>
    <td><button type="button" class="btn btn-primary btn-sm" id="addRws3"><i class="fa fa-plus"></i></button></td>
</tr>
{{/each}}

[atomictag]

@bjmercado how does your context data look like?
For the above to work it would need to be something like

{
   ...
  gpareaData : [{
     id : ...,
     desc : ...,
     branch : [{
         id : ....,
         branch_desc : ...,
         ....
     }]
  }]
}

[bjmercado]

@atomictag so i'll just program to format my data?, im using mysql for the database

this is the branch
[ RowDataPacket { id: 1, branch_desc: 'Alaminos', branch_address: 'Marcos Avenue, Poblacion, Alaminos, Pangasinan', area_id: 3, created_at: null, updated_at: null }, RowDataPacket { id: 2, branch_desc: 'Alcala', branch_address: 'Poblacion East, Alcala, Pangasinan', area_id: 2, created_at: null, updated_at: null }]

and this is the gpAreaData
[ RowDataPacket { id: 9, gp_id: 35, branch_id: 1, created_at: null, updated_at: null }, RowDataPacket { id: 10, gp_id: 35, branch_id: 2, created_at: null, updated_at: null } ]

[bjmercado]

hey guys i just solve the problem i just put ../ in the branch

`{{#each gpareaData}}

{{desc}} {{#each ../branch}} {{branch_desc}} {{/each}} {{/each}}`

[Farrukh-Sarmad]

       {{#allData}} 
            {{#assignedData}} 
                <div class="col-md-2">
                    {{#ifEqual id course_id }}
                        <h6><input type="checkbox" name="course[]" value="{{id}}" checked> {{title}}</h6>
                    {{else}}
                        <h6><input type="checkbox" name="course[]" value="{{id}}"> {{title}}</h6>
                    {{/ifEqual}}
                </div>
            {{/assignedData}}
        {{/allData}}

its my code but the control is not even entering into the nester each. I want to know why ?

[nknapp]

Closing due to inactivity. I think this is a valid issue, but it can be worked around by using block parameters. Fixing it would be a breaking change, so I'd rather keep this a known bug at the moment.

It should be documented though.