set variable in hbs template using ember.js

Question

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.

What is the relationship between your template and Ember.js? (It sounds like the template generates an HTML document which is sent to the client where Ember.js runs, which would make this [a duplicate](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming), but its really unclear) — Quentin, Jul 04 '23 at 13:11
From what I understood, there are ember helpers that could be used to achieve my need, like the {{#let}}. My project is working with that so I'm specifying the technical stack — user1654719847, Jul 04 '23 at 13:16
Quentin -- ember uses a template syntax for components -- HTML is not generated -- you may be interested in these documents / sites https://cheatsheet.glimmer.nullvoxpopuli.com/docs/templates, and https://tutorial.glimdown.com/ -- and for how the templating system works: https://m.youtube.com/watch?v=nXCSloXZ-wc — NullVoxPopuli, Jul 04 '23 at 13:21
To other mods, please do not close this issue, this was a legit question from a new user, and Quentin didn't understand what emberjs is (yet!!) — NullVoxPopuli, Jul 04 '23 at 13:22

NullVoxPopuli · Answer 1 · 2023-07-04T14:27:09.187

1

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)

edited Jul 04 '23 at 14:27

answered Jul 04 '23 at 13:19

NullVoxPopuli

61,906
73
206
352

This does not seems to be working even though I took the provided code. Could `myArray` be in cause? It is defined in my controller. – user1654719847 Jul 04 '23 at 13:32
It works here, in the demo I just attached? – NullVoxPopuli Jul 04 '23 at 14:26
can you provide more details about what isn't working? are there errors anywhere? – NullVoxPopuli Jul 04 '23 at 14:27
I'm expecting to create a `` displaying the value of each item of `myArray`, but nothing is showing up. There is no errors showing up as well – user1654719847 Jul 05 '23 at 07:25

score 0 · Answer 2 · answered Jul 05 '23 at 07:56

0

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>

answered Jul 05 '23 at 07:56

user1654719847

11
1

huh, maybe let doesn't exist all the way back in ember 2.13 – NullVoxPopuli Jul 05 '23 at 21:20

set variable in hbs template using ember.js

2 Answers2