Handlebar for loop iteration array of objects | each helper examples


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

In this tutorials, We learned about each iteration in handler bars and see some examples how to iterate in handlebarjs with examples

handlebarJS provides looping with each helper classes using #each helper classe

Handlebar JS provides expression templates which need to be enclosed 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 an 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 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 for iterating array of objects In this example, this points current object where

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 multi dimensional 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 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 value using key inside a template
{{#employee}}
    {{ id }}  - {{ name }} - {{ salary }}
    {{/employee}}

Conclusion

In this exmaple, Learned Handlebarjs template expression to iterate different objects, string array, 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.