How to Get Index in Handlebars Each Helper

How to get index in Handlebars each helper?

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

Access array index from output of helper in handlebars

I can think of two ways, but there might be better ways (haven't used handlebars recently)

Either use #with to get the array and then access its elements with []

{{#with (split title "==FUBC==")}}
    {{log [0]}}
{{/with}}

or directly use the lookup helper.

{{log (lookup (split title "==FUBC==") 1)}}

Adding offset to {{@index}} when looping through items in Handlebars

Handlebars gives you the possibility to write a custom helper that handles this situation, e.g. a helper function that lets you perform calculations on expressions like addition and subtraction etc.

Below function registers a new helper, which simply increments a value by 1:

var Handlebars = require('handlebars');

Handlebars.registerHelper("inc", function(value, options)
{
    return parseInt(value) + 1;
});

You can then use it within the handlebar expression using the inc keyword, like:

{{inc @index}}

Accessing previous index value while looping with #each in handlebars

    {{#each posts}}     
        <div class="lb-overlay" id="image-{{id}}">       
            <a href="#image-{{getIdByIndex ../posts (math @index '-' 1)}}" class="lb-prev">Prev</a>       
            a href="#image-{{getIdByIndex ../posts (math @index '+' 1)}}" class="lb-next">Next   
        </div> 
    {{/each}}

    getIdByIndex: function(posts, index) {
        return posts[index].id;
    }

How to get index for parent loop in Handlebars template?

It looks like this is not currently possible the way you want to do it: https://github.com/wycats/handlebars.js/issues/491

But you could set the index to a new variable in the outer scope to access it.

handlebars get index for loop

You're looking to inject private variables into your templates :

Block helpers can also inject private variables into their child
templates. This can be useful to add extra information that is not in
the original context data.

For example, when iterating over a list, you may provide the current
index as a private variable.

You just have to provide a data entry in the options you pass to your block function (and ensure the coherence of the child data object with Handlebars.createFrame)

A modified helper exposing an @index key:

Handlebars.registerHelper('for', function(from, to, incr, block) {
    var data;

    if (block.data) {
        data = Handlebars.createFrame(block.data);
    }

    var accum = '';
    for(var i = from; i < to; i += incr) {
        if (data) {
          data.index = i;
        }
        accum += block.fn(i, {data: data});
    }
    return accum;
});

and a demo

Handlebars.registerHelper('for', function(from, to, incr, block) {    var data;
    if (block.data) {        data = Handlebars.createFrame(block.data);    }

    var accum = '';    for(var i = from; i < to; i += incr) {        if (data) {          data.index = i;        }        accum += block.fn(i, {data: data});    }    return accum;});
var tpl = Handlebars.compile($('#rows').html());$('body').append(tpl({    rows: [1, 2]}));

.edit-column {padding-left: 10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script type='text/template' id='rows'>{{#each rows}}    <div class="row">{{@index}}        {{#for 0 3 1}}            <div class="edit-column">{{@../index}}:{{@index}}</div>        {{/for}}    </div>{{/each}}</script>

---

Related Topics