Handlebar for loop iteration(example)

Handlebar for loop iteration(example)

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}}
}}

  • A 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

Iterate Array of Strings.

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>

Loop array of objects in the handlebar

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>

Each iteration multidimensional array

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

[
  {
    "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, Learn Handlebarjs template expression to iterate different objects, string arrays, an array of objects, and json objects.