{{#each-in ...}}

{{#each-in object as |key value|}}...{{/each-in}}

{{#each-in object as |key value|}}...{{else}}...{{/each-in}}

Iterating through objects can be done with the {{#each-in}} block, similar to JavaScript's for ... in loop.

const pokemon = {
  grass: ['Bulbasaur', 'Chikorita', 'Treecko'],
  water: ['Squirtle', 'Totodile', 'Mudkip'],
  fire: ['Charmander', 'Cyndaquil', 'Torchic']
}

<template>
  {{#each-in pokemon as |element pokemons|}}
    {{element}} pokemon:

    <ul>
    {{#each pokemons as |name|}}
      <li>{{name}}</li>
    {{/each}}
    </ul>
  {{/each-in}}
</template>

Ordering

An object's keys will be listed in the same order as the array returned from calling Object.keys on that object. If you want a different sort order, you should use Object.keys to get an array, sort that array with the built-in JavaScript tools, and use the {{#each}} block instead.

Empty Object

An {{#each-in}} block can have an {{else}} clause. The contents of this block will render if the object is empty, null, or undefined.

const pokemon = {}

<template>
  {{#each-in pokemon as |element pokemons|}}
    ... (see above) ...
  {{else}}
    No pokemon to show.
  {{/each-in}}
</template>