Nested {{#each}} isn't working

Question

I have the following arrays in my JavaScript:

let food = [
    'taco',
    'burrito',
    'hamburger',
  ]

let drinks = [
    'water',
    'milk',
    'soda',
  ]

I pass these to my Handlebars template and I do this:

{{#each food as |food|}}
  {{food}}
  {{#each drinks as |drink|}}
    {{drink}}
  {{/each}}
{{/each}}

But it only prints out

taco burrito hamburger

I would expect the output to be something like this (separated into newlines for legibility)

taco
water
milk
soda
burrito
water
milk
soda
hamburger
water
milk
soda

It appears to completely ignore the nested each loop. What is wrong here?

Possible duplicate of [Handlebars nested 'each' syntax - not iterating over each element](https://stackoverflow.com/questions/17197731/handlebars-nested-each-syntax-not-iterating-over-each-element) — cwallenpoole, Oct 10 '17 at 01:52
@JakeWilson no need for the attitude - you want help, be nice — Jaromanda X, Oct 10 '17 at 01:56
No attitude intended. I sincerely wasn't sure if it was clear or not. — Jake Wilson, Oct 10 '17 at 02:18
Possible duplicate of [Access a variable outside the scope of a Handlebars.js each loop](https://stackoverflow.com/questions/13645084/access-a-variable-outside-the-scope-of-a-handlebars-js-each-loop) — lifeisfoo, Oct 11 '17 at 12:58

score 7 · Accepted Answer · answered Oct 10 '17 at 02:22

7

This is a context problem. The inner each is in the context of the outer one which doesn't have drinks defined.

Here is an example of a working template;

{{#each food as |food|}}
  {{food}}
  {{#each ../drinks as |drink|}}
    {{drink}}
  {{/each}}
{{/each}}

Here, we use ../ to backtrack to the parent context, where drinks is defined.

answered Oct 10 '17 at 02:22

Shadow

Oh I didn't know that `each` loops were scoped that way. Thank you! – Jake Wilson Oct 10 '17 at 04:07

1 Answers1