I'm trying to display an array of items with Mustache, and I'd like to show them with a ma separator.

Here is my object :

{"items": [
    {"display": "Item 1"},
    {"display": "Item 2"},
    {"display": "Item 3"},
    {"display": "Item 4"}
]}

And here's my Mustache JS template :

{{#items}}{{display}}, {{/items}}

Unfortunately, this will render as :

Item 1, Item 2, Item 3, Item 4, 

I'd like to remove the last ", ", since it seems odd visually.

I tried with functions, but I got the "{{items}}" text, not the array items.

How can I do this?

I'm trying to display an array of items with Mustache, and I'd like to show them with a ma separator.

Here is my object :

{"items": [
    {"display": "Item 1"},
    {"display": "Item 2"},
    {"display": "Item 3"},
    {"display": "Item 4"}
]}

And here's my Mustache JS template :

{{#items}}{{display}}, {{/items}}

Unfortunately, this will render as :

Item 1, Item 2, Item 3, Item 4, 

I'd like to remove the last ", ", since it seems odd visually.

I tried with functions, but I got the "{{items}}" text, not the array items.

How can I do this?

• javascript
• mustache

• I posted a similar question with my own proposed answer. See this posting for more – Michael M Commented Mar 5, 2014 at 22:10

2 Answers 2

You could use a Mustache function. These are defined in your template like any other section, then run on the content they're wrapped around. For your case it would look something like this:

{
  "items": [
    {"display": "Item 1"},
    {"display": "Item 2"},
    {"display": "Item 3"},
    {"display": "Item 4"}
  ],
  "trim": function () {
    return function (text, render) {
      return render(text).replace(/(,\s*$)/g, ''); // trim trailing ma and whitespace 
    }
  }
}

Then your Mustache markup will look like this:

{{#trim}}{{#items}}{{display}}, {{/items}}{{/trim}}

And your output will be what you're after:

Item 1, Item 2, Item 3, Item 4

Check it out on jsfiddle.

well i know 2 ways of solve this, first is to program your own iterator helper (and this is the best solution), and the sencond, is to delete manually (with DOM Handling) the trailing a.

just find the text with your javascript ($("selector").html()), and slice it.

var html = jQuery("selector").html();
html = html.slice(0, html.length-1);

that way you cut the last character.