Each-in helper

by Ryan Toronto

Today I was working on a feature where I needed to display a list of emojis in a template.

The emojis were stored in a plain JavaScript object on one of my components:

  emojis: {
    'thumbsup': { image: 'thumbsup.png', text: 'Thumbs up!' },
    'heart': { image: 'heart.png', text: 'Love it!' }

My first thought was to each over the object:

{{#each emojis as |emoji|}}
  Nothing to show

But this didn't work, because JavaScript objects are not iterateable using the {{#each}} helper. The above template would just always render "Nothing to show".

This is where each-in comes in. It lets us iterate over a JavaScript object:

{{#each-in emojis as |name props|}}
 {{name}}: {{props.text}}

Just what I needed!

Here's a twiddle demonstrating the code.


Send us a tweet:

Or ask us in Inside EmberMap, our private Slack workspace for subscribers.