Access array value with index in Handlebars

Last reviewed in June 2019 with Ember Octane

Say we want a table listing all the data in the following model:

// model hook in a route

model() {
  return [
    [1, "text a"],
    [2, "text b"],
    [3, "text c"],
  ]
}

How do we access each item by index in the Handlebars template?

Here's how:

<ul>
{{#each model as |item|}}
  <li>
    {{item.[0]}}: {{item.[1]}}
  </li>
{{/each}}
</ul>

Which will output:

<ul>
  <li>
    1: text a
  </li>
  <li>
    2: text b
  </li>
  <li>
    3: text c
  </li>
</ul>

When the array items are objects, we can drop the brackets and simply write:

<ul>
{{#each model as |item|}}
  <li>
    {{item.0.text}}: {{item.1.text}}
  </li>
{{/each}}
</ul>

To get the index within an #each helper loop, we use:

{{#each model as |item i|}}
  Index is: {{i}}
{{/each}}

And that's it!

New to Ember? Start here!

Snacks is the best of Ember Octane in a highly digestible monthly newsletter. (No spam. EVER.)