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:

Ember.Component.extend({ 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|}} {{emoji}} {{ else }} Nothing to show {{/ each }}

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}} {{/ each -in}}

Just what I needed!

Here's a twiddle demonstrating the code.