Handlebar for loop iteration array of objects

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 handlebars 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 a type of enumerated type like an array of objects/types or json objects.
this element is a reference object during iteration

There are some helper classes.

{{@index}} - returns the current loop index starting from 0 {{@first}} - returns the first element of an array of objects {{@last}} - It returns the 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"];

Below is a template, which is compiled to output as HTML

<div class="list">
    {{#each this}}
    <span>{{this}}</span> {{/each}}
    </span>
</div>

Output:

<div class="list">
    <span>one</span>
    <span>two</span>
    <span>three</span>
</div>

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.

<div class="list">
  {{#each employees}}
  <div>{{this.id}} - {{this.name}} - {{this.salary}}</div>
  {{/each}}
</div>

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

Another example, of multidimensional array iteration. First, Declare an array of arrays as below

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

Here is an example to iterate and print an 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 each loop returns the current iteration index.

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

Generated HTML

[{
"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 a json object for this example

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

Here handlebarjs code to parse in the HTML template.

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

Use # 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 arrays, an array of objects, and json objects.

Handlebar for loop iteration array of objects | each helper example