CODEWITHSUNDEEP
javascripthandlebars.js
thunderboltz
thunderboltz

Reputation: 3457

How to get index in Handlebars each helper?

I'm using Handlebars for templating in my project. Is there a way to get the index of the current iteration of an "each" helper in Handlebars?

<tbody>
     {{#each item}}
         <tr>
            <td><!--HOW TO GET ARRAY INDEX HERE?--></td>
            <td>{{this.key}}</td>
            <td>{{this.value}}</td>
         </tr>
     {{/each}}
</tbody>

Upvotes: 305

Views: 231163

Answers (9)

Mritunjay Paswan
Mritunjay Paswan

Reputation: 59

If you want to start your index with 0

<tbody>
 {{#each item}}
     <tr>
        <td>{{@index}}</td>
        <td>{{this.key}}</td>
        <td>{{this.value}}</td>
     </tr>
 {{/each}}

If you want to start your index with 1.

In JavaScript

Handlebars.registerHelper('print', function(value) {
    return ++value
});

In HTML file

<tbody>
 {{#each item}}
     <tr>
        <td>{{print @index}}</td>
        <td>{{this.key}}</td>
        <td>{{this.value}}</td>
     </tr>
 {{/each}}

Upvotes: 1

cng.buff
cng.buff

Reputation: 583

    <tbody>
        {{#each courses}}
        <tr>
            <th scope="row">{{@index}}</th>
            <td>{{this.name}}</td>
            <td>{{this.description}}</td>
            <td>{{this.createdAt}}</td>
        </tr>
        {{/each}}
    </tbody>

enter image description here

Upvotes: 0

MD SHAYON
MD SHAYON

Reputation: 8063

Using loop in hbs little bit complex

<tbody>
     {{#each item}}
         <tr>
            <td><!--HOW TO GET ARRAY INDEX HERE?--></td>
            <td>{{@index}}</td>
            <td>{{this}}</td>
         </tr>
     {{/each}}
</tbody>

Learn more

Upvotes: 4

anonymous
anonymous

Reputation: 1711

In handlebar version 4.0 onwards,

{{#list array}}
  {{@index}} 
{{/list}}

Upvotes: 1

RegarBoy
RegarBoy

Reputation: 3521

Arrays:

{{#each array}}
    {{@index}}: {{this}}
{{/each}}

If you have arrays of objects... you can iterate through the children:

{{#each array}}
    //each this = { key: value, key: value, ...}
    {{#each this}}
        //each key=@key and value=this of child object 
        {{@key}}: {{this}}
        //Or get index number of parent array looping
        {{@../index}}
    {{/each}}
{{/each}}

Objects:

{{#each object}}
    {{@key}}: {{this}}
{{/each}}

If you have nested objects you can access the key of parent object with {{@../key}}

Upvotes: 10

Ember Freak
Ember Freak

Reputation: 12872

In handlebar version 3.0 onwards,

{{#each users as |user userId|}}
  Id: {{userId}} Name: {{user.name}}
{{/each}}

In this particular example, user will have the same value as the current context and userId will have the index value for the iteration. Refer - http://handlebarsjs.com/block_helpers.html in block helpers section

Upvotes: 20

Naitik
Naitik

Reputation: 1465

I know this is too late. But i solved this issue with following Code:

Java Script:

Handlebars.registerHelper('eachData', function(context, options) {
      var fn = options.fn, inverse = options.inverse, ctx;
      var ret = "";

      if(context && context.length > 0) {
        for(var i=0, j=context.length; i<j; i++) {
          ctx = Object.create(context[i]);
          ctx.index = i;
          ret = ret + fn(ctx);
        }
      } else {
        ret = inverse(this);
      }
      return ret;
});

HTML:

{{#eachData items}}
 {{index}} // You got here start with 0 index
{{/eachData}}

if you want start your index with 1 you should do following code:

Javascript:

Handlebars.registerHelper('eachData', function(context, options) {
      var fn = options.fn, inverse = options.inverse, ctx;
      var ret = "";

      if(context && context.length > 0) {
        for(var i=0, j=context.length; i<j; i++) {
          ctx = Object.create(context[i]);
          ctx.index = i;
          ret = ret + fn(ctx);
        }
      } else {
        ret = inverse(this);
      }
      return ret;
    }); 

Handlebars.registerHelper("math", function(lvalue, operator, rvalue, options) {
    lvalue = parseFloat(lvalue);
    rvalue = parseFloat(rvalue);

    return {
        "+": lvalue + rvalue
    }[operator];
});

HTML:

{{#eachData items}}
     {{math index "+" 1}} // You got here start with 1 index
 {{/eachData}}

Thanks.

Upvotes: 14

Ryan H Lewis
Ryan H Lewis

Reputation: 624

This has changed in the newer versions of Ember.

For arrays:

{{#each array}}
    {{_view.contentIndex}}: {{this}}
{{/each}}

It looks like the #each block no longer works on objects. My suggestion is to roll your own helper function for it.

Thanks for this tip.

Upvotes: 19

ro60
ro60

Reputation: 5704

In the newer versions of Handlebars index (or key in the case of object iteration) is provided by default with the standard each helper.

snippet from : https://github.com/wycats/handlebars.js/issues/250#issuecomment-9514811

The index of the current array item has been available for some time now via @index:

{{#each array}}
    {{@index}}: {{this}}
{{/each}}

For object iteration, use @key instead:

{{#each object}}
    {{@key}}: {{this}}
{{/each}}

Upvotes: 568

Related Questions