Dealing with an empty list in mustache.js Dealing with an empty list in mustache.js javascript javascript

Dealing with an empty list in mustache.js


You could use persons.length. If it is a truthy value (i.e. greater than 0) then the block will be rendered.

{{#persons.length}}<h2>Persons:</h2><ul>  {{#persons}}    <li>{{name}}</li>  {{/persons}}</ul>{{/persons.length}}


After struggling for half a day with this problem, I've finally found an easy solution!

Don't check for the list, but check if its first item is not empty!

Template:

{{#persons.0}}<h2>Persons:</h2><ul>  {{#persons}}    <li>{{name}}</li>  {{/persons}}</ul>{{/persons.0}}{{^persons.0}}No persons{{/persons.0}}

Data:

{  "persons":[    {"name": "max"},    {"name": "tom"}  ]}

Output:

<h2>Persons:</h2><ul>  <li>max</li>  <li>tom</li></ul>

Data:

{  "persons": []}

Output:

"No Persons"


To keep your template logic-less, you can make this check before rendering the template:

// assuming you get the JSON converted into an objectvar data = {    persons: [        {name: "max"}      , {name: "tom"}    ]};data.hasPersons = (data.persons.length > 0);

Then your template will look like this:

<h2>Persons:</h2>{{#hasPersons}}<ul>  {{#persons}}    <li>{{name}}</li>  {{/persons}}</ul>{{/hasPersons}}