How to find Array length inside the Handlebar templates?

Question

I have a Handlebars template which is rendered using a json object. In this json I am sending an array. Like this:

var json = {
               "array":["abc","def","ghi","jkl"] 
}

Now in my template I want to find the length of this array. Something like:

{{#each item}}
   {{ array.length }}
{{/each}}

Couldn't find it in the Handlebars documentation.

score 226 · Accepted Answer · edited Sep 11 '17 at 14:18

226

My Bad....

{{array.length}} actually worked inside the template. Should have checked/tested it before posting it here.

edited Sep 11 '17 at 14:18

answered Mar 15 '13 at 09:24

Abhidev

44

well, you saved me from having to test it out, so thanks. :) – Perry Tew Jun 18 '13 at 17:32
9

This doesn't work at least for Mandrills flavor of handlebars for anyone that is wondering. I have not yet found a suitable replacement. – oneirois Feb 05 '16 at 21:26

Kevin Powell · Answer 2 · 2015-06-29T20:25:29.607

50

In this case you need to reference the parent variable of the each from within the each block:

{{#each array}}
    {{../array.length}}
{{/each}}

I think your variable being named "array" is probably conflating the issue as well. Let's assume some different JSON just to clarify:

var json = {
    "fruit":["apple","orange","banana"]
};

So then doing this:

<ul>
    {{#each fruit}}
        <li>{{this}} {{@index}} {{../fruit.length}}</li>
    {{/each}}
</ul>

Would yield:

<ul>
    <li>apple 0 3</li>
    <li>orange 1 3</li>
    <li>banana 2 3</li>
</ul>

edited Jun 29 '15 at 20:25

answered Apr 07 '15 at 21:06

Kevin Powell

1

I think the list items would be `apple 0 3` `orange 1 3` `banana 2 3` – Paul May 30 '15 at 22:04
@Paul, you're correct, example updated to reflect the correct output. – Kevin Powell Jun 29 '15 at 20:26
Related question: how do you get the length of an array when it's the current pipeline value? – Gyscos Oct 09 '15 at 20:38
Syntactically, this answer makes more sense than the accepted answer. – Neil Monroe Apr 20 '16 at 22:17
This was a great answer and should be chosen as the correct one! – Aditya Rao Jan 06 '21 at 04:38

score 3 · Answer 3 · answered Jun 30 '16 at 11:25

3

You can define simple helper to handle it:

Handlebars.registerHelper('get_length', function (obj) {
 return obj.length;
});

And then use it in your template eg:

{{get_length some_object}}

answered Jun 30 '16 at 11:25

gesiud

2

`length` is a property of the object, it's not necessary to register helpers to get the value of a property since Handlebars supports dot notation. – Paul Aug 05 '21 at 12:28

score 2 · Answer 4 · answered Dec 20 '18 at 09:59

2

If you are testing for an empty list in order to display content... In Ember.js which uses handlebars, you can have an else for the #each.

{{#each blah as |blah|}}

{{else}}
 //   If array is empty
{{/each}}

answered Dec 20 '18 at 09:59

Epirocks

4 Answers4