Access to next array item in handlebars.js

Question

I need access to next item in array while using foreach loop in handlebars.js.I've tried:

{{#each items}}
{{#ifEven @index}}
<p>{{this.description}} - {{../items.[@index+1].description}}</p>
{{/ifEven}}
{{/each}}

but it seems that's not working correctly.

This is going to break as soon as you reach the last item in the array. Why do you need to include the next item in the current one? — user1366860
– user1366860, Commented Aug 20, 2018 at 16:59
Because I'm displaying only even items. If next item is odd, I want to put it's description in current iteration. — feyen01
– feyen01, Commented Aug 20, 2018 at 17:03
In that case you are doing too much on your template. It is best if you prepare your array before rendering. Templates should have as few logic as possible to avoid weird, hard to debug and trace errors. — user1366860
– user1366860, Commented Aug 20, 2018 at 17:05
Sure, but I wanted to keep it in template file for some reasons. I just solved this issue by using helper. — feyen01
– feyen01, Commented Aug 20, 2018 at 17:10

feyen01 · Accepted Answer · 2018-08-20 17:08:19Z

2

I already solved it using helper:

hbs.registerHelper('nextItem', function (array, index, options) {
  return options.fn(array[index + 1]);
});

And .hbs template now looks like this:

{{#each items}}
{{#ifEven @index}}
<p>{{this.description}} - {{#nextItem ../items index}} {{description}} {{/nextItem}}</p>
{{/ifEven}}
{{/each}}

I know, that last element will not show, but this doesn't matter in my case.

answered Aug 20, 2018 at 17:08

feyen01

4177 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1