{

Handlebar for loop iteration array of objects | each helper examples


Handlebars is a template language for parsing objects in javascript-based templates.

In these tutorials, We learned about each iteration in handler bars. Let’s see some examples of how to iterate in handlebarjs for example.

handlebarJS provides looping with each helper class using #each helper classes.

Handlebar JS provides expression templates that enclose in double curly braces - {{}}.

each syntax

  {{#each variable}}
{{this}}
}}
  • variable is an type of enumerated types like array of objects/types or json objects.

  • this element is a reference object during iteration

There are some helper classes.

{{@index}} - returns current loop index starting from 0 {{@first}} - returns first element of an array objects {{@last}} - It returns last element of array objects {{@key}} - current object key name

How to iterate an array of objects in handlebars

Let’s declare an array of Strings

 [
    "one",
    "two",
    "three",
  ]
<div class="list">
{{#each this}}
  <span>{{this}}</span>
{{/each}}
</span>

How to iterate a print array of objects in handlebar javascript?

Let’s have an array of objects

 var employees=[{
  "id":1,
    "name":"John",
    "salary":5000,
 },{
  "id":2,
    "name":"Franc",
    "salary":4000,
 },{
  "id":3,
    "name":"Ram",
    "salary":9000,
 }]

Here is an example of an iterating array of objects. In this example, this points current object.

It generates html content as

<div class="list">
    <div>0 - 1 - John - 5000</div>
    <div>1 - 2 - Franc - 4000</div>
    <div>2 - 3 - Ram - 9000</div>
</div>

Handlerbar multidimensional array iteration

Declare an array of arrays as below

 [[1,2],[2,3],[3,4]]

Here is an example to iterate and print array of array

{{#each this}}
  {{#each this}}
    {{ this }}
  {{/each}}
{{/each}}

How to get the current index of an array iteration

[{
  "id":1,
    "name":"John",
    "salary":5000,
 },{
  "id":2,
    "name":"Franc",
    "salary":4000,
 },{
  "id":3,
    "name":"Ram",
    "salary":9000,
 }]

@index inside an each loop returns current iteration index.

<div class="list">
  {{#each this}}
    <div>{{@index}} - {{this.name}}</div>
  {{/each}}
</div>

Generated HTML

ut [{ “id”:1, “name”:“John”, “salary”:5000, },{ “id”:2, “name”:“Franc”, “salary”:4000, },{ “id”:3, “name”:“Ram”, “salary”:9000, }] [{ “id”:1, “name”:“John”, “salary”:5000, },{ “id”:2, “name”:“Franc”, “salary”:4000, },{ “id”:3, “name”:“Ram”, “salary”:9000, }] Output

<div class="list">
    <div>0 - John</div>
    <div>1 - Franc</div>
    <div>2 - Ram</div>
</div>

How to iterate JSON data object with handlebars

Let’s declare an json object for this exmaple

{"employee":{
  "id":1,
    "name":"John",
    "salary":5000,
 }
}

Here handlebarjs code to parse in HTML template.

In the above json object, we have a key called employee.

  • using # in template expression with double quotation marks for a key
  • parsed and retrieved key values using keys inside a template
{{#employee}}
    {{ id }}  - {{ name }} - {{ salary }}
    {{/employee}}

Conclusion

In this example, Learned Handlebarjs template expression to iterate different objects, string array, an array of objects, and json object.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.