142

Is there a way in Handlebars.js templating to check if the collection or list is null or empty, before going and iterating through the list/collection?

// if list is empty do some rendering ... otherwise do the normal
{{#list items}}

{{/list}}



{{#each items}}

{{/each}}

5 Answers 5

265

If you have something that you want to display once and only if the array has data, use

{{#if items.length}}
    //Render
{{/if}}

.length will return 0 for empty arrays so we have achieved a real falsey value.

6
  • 1
    Both answers are correct and work, and they answer the question. Which was how to display something when there is no data in the array. Not the other way around.
    – Drejc
    Commented Feb 7, 2014 at 22:00
  • 18
    No i agree, this is the correct answer. It doesn't include a for loop.
    – radtek
    Commented Oct 18, 2014 at 20:59
  • 5
    Simple case: I want to render an <ul> tag once and an <li> tag for each item in the list. If the list is empty I don't even want the <ul> to render, and rendering something else like <p>empty list<p> inside the <ul> doesn't make sense.
    – Fuad Saud
    Commented Mar 24, 2015 at 23:18
  • 3
    This answer is implementation specific. The handlebars docs specify that [] is evaluated as false. The answer by @Drejc is the correct answer by handlebar specification.
    – Stim
    Commented Mar 14, 2016 at 14:01
  • 1
    thank you dude that is way better solution than registerHelper.
    – Danish
    Commented Jan 30, 2017 at 14:06
232

The "each" tag can take an "else" section too. So the simplest form is:

{{#each items}}
// render item
{{else}}
// render empty
{{/each}}
1
  • 2
    That's cool, but doesn't answer the question. If you want a tag to wrap #each, like an <ul> tag (with <li>s inside), you don't want the empty state to be wrapped by the <ul>. Commented Jul 15, 2019 at 20:41
40

Ok it's simpler than I thought:

{{#if items}}
// render items

{{#each items}}
// render item
{{/each}}

{{else}}
// render empty
{{/if}}
3
  • 5
    If items is an empty array (i.e. has a value of []), it will produce a truthy value. Whereas items.length produces a falsey value for an empty array. See @Duane's answer.
    – gfullam
    Commented Dec 9, 2015 at 20:02
  • Huh ... 3 years have past since ... it might be that the implementation has changed or that I simple had no case of [] array. As far as I recall it worked for me.
    – Drejc
    Commented Dec 10, 2015 at 20:19
  • 15
    You're right. I preemptively commented based on the behavior of native JS' if, but the Handlebars documentation is very clear: "If its argument returns false, undefined, null, "", 0, or [], Handlebars will not render the block." I should have checked the docs first.
    – gfullam
    Commented Dec 11, 2015 at 14:43
8

If you want to check if a collection (cursor) is empty or not, the previous answers won't be useful, instead you must use the count() method :

{{#if items.count}}
    <p>There is {{items.count}} item(s).</p>
{{else}}
    <p>There is nothing</p>
{{/if}}
2
  • 2
    @BasicWolf it does not, count works with cursor, if you have array use length instead.
    – Karl.S
    Commented Sep 12, 2015 at 6:05
  • This works great to check between an array and an object, and to handle them differently. Commented Nov 1, 2016 at 22:06
2

For anyone who needs to use an {{#each}} on top of {{#if}} (i.e. an if loop inside a for loop). Is they have three different list of arrays.

Using a lookup inside a if statement solves the issue for me. As, the above answers did not solve my issue.

Here is my code,

{{#each OtherRandomItems}}

  {{this}}

  {{lookup ../AnotherRandomItems @index}}

  {{#if (lookup ../RandomItems @index)}}
  // render items
  {{else}}
  // render empty
  {{/if}}

{{/each}}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.