EmberJS - Displaying a List of Items

You can display the list of items in an array by using the #each helper and it iterates once for each item present in an array.

Syntax

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

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

Example

The example given below displays a list of items by using the #each helper. To display the items, create a component by using the following command −

ember g component group-list

Next, open the group-list.js created under app/component/ along with the following code −

import Ember from 'ember';

export default Ember.Component.extend ({
   arrayOFgroup:['apple','pineapple','banana']
});

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

<ul>
   {{#each arrayOFgroup as |fruit|}}
      <li>{{fruit}}</li>
   {{/each}}
</ul>

To list the items from an array, use the below code in the application.hbs file created under app/templates/ −

<p>List of Items:</p>
{{group-list}}
{{outlet}}

Output

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