Displaying the Keys in an Object

If you need to display all of the keys or values of a JavaScript object in your template, you can use the {{#each-in}} helper:

import Ember from 'ember';

export default Ember.Component.extend({
  willRender() {
    // Set the "categories" property to a JavaScript object
    // with the category name as the key and the value a list
    // of products.
    this.set('categories', {
      'Bourbons': ['Bulleit', 'Four Roses', 'Woodford Reserve'],
      'Ryes': ['WhistlePig', 'High West']
  {{#each-in categories as |category products|}}
        {{#each products as |product|}}

The template inside of the {{#each-in}} block is repeated once for each key in the passed object. The first block parameter (category in the above example) is the key for this iteration, while the second block parameter (products) is the actual value of that key.

The above example will print a list like this:

      <li>Four Roses</li>
      <li>Woodford Reserve</li>
      <li>High West</li>


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}} helper instead.

Empty Lists

The {{#each-in}} helper can have a matching {{else}}. The contents of this block will render if the object is empty, null, or undefined:

{{#each-in people as |name person|}}
  Hello, {{name}}! You are {{person.age}} years old.
  Sorry, nobody is here.

© 2017 Yehuda Katz, Tom Dale and Ember.js contributors
Licensed under the MIT License.