EmberJS - Displaying Keys in an Object

You can display the keys in the object by using the #each-in helper and it iterates once for each key passed in object.

Syntax

<ul>
   {{#each-in array_name as |block-param| }}
      <li>{{block-param}}</li>
   {{/each}}
</ul>

In the above code, template iterates array_name, which includes objects and each key in the object specified as block-param.

Example

The example given below displays the keys in the object by using the #each-in helper. To display the items, create a component by using the following command −

ember g component store-categories

Now open the store-categories.js created under app/component/ along with the following code −

import Ember from 'ember';

export default Ember.Component.extend ({
   willRender() {
      this.set('typesOfvehicles', {
         'Cars': ['Ferrari', 'Audi', 'BMW'],
         'Motor bikes': ['Harley-Davidson', 'Yamaha','Honda']
      });
   }
});

Create a template called store-categories.hbs under app/templates/ with the following code −

<ul>
   {{#each-in typesOfvehicles as |category products|}}
      <li>{{category}}
         <ol>
            {{#each products as |product|}}
               <li>{{product}}</li>
            {{/each}}
         </ol>
      </li>
   {{/each-in}}
</ul>

To list the keys in the object, use the following code in the application.hbs file created under app/templates/ −

<p>This is Displaying the Keys in an Object:</p>
{{store-categories}}
{{outlet}}

Output

Run the ember server and you will receive the following output −