set variable in hbs template using ember.js

95 Views Asked by At

I have an array of data and I need to iterate over it in my hbs template:

{{#each-in myArray.[0] as |key value|}}
  <th>
    {{value}}
  </th>
{{/each-in}}

{{#each-in myArray.[1] as |key value|}}
  <th>
    {{value}}
  </th>
{{/each-in}}

How do I declare a variable and increase it to replace the hardcoded value?

I tried to wrap with {{#let}} but that did not worked:

{{#let index=0}}
  {{#each-in myArray.[index] as |key value|}}
    <th>
      {{value}}
    </th>
  {{/each-in}}
{{/let}}

I'm using ember 2.13.

2

There are 2 best solutions below

4
NullVoxPopuli On

You're very close!

{{#let 0 as |index|}}
  {{#each-in (get myArray index) as |key value|}}
    <th>
      {{value}}
    </th>
  {{/each-in}}
{{/let}}

The docs on let: https://api.emberjs.com/ember/5.0/classes/Ember.Templates.helpers/methods/let?anchor=let

The key-take-aways is that the templates use a different syntax, which is described here, https://cheatsheet.glimmer.nullvoxpopuli.com/docs/templates

Here is a working demo

(Note this uses the new gjs format, tutorial here: https://tutorial.glimdown.com)

1
AudioBubble On

This has finally worked for me, thanks to NullVoxPopuli's answer that put me on the right way. For some reasons, {{#let}} was not working.

Posting it in the case anybody could need it:

<tr>
  {{#each-in myArray as |index object|}}
  <tr>
    {{#each-in (get myArray index) as |key value|}}
    <th>
      {{value}}
    </th>
    {{/each-in}}
  </tr>
  {{/each-in}}
</tr>