Is there a way to set a counter in a mustache iteration?

Question

I have a code that renders a mustache template with some iterations like:

{{#items}}
  some html code....
{{/items}}

but I want to place into the iteration the number of item that is rendered, like that:

{{#items}}
  This is the item [COUNTER-VAR]
{{/items}}

There is some way to perform this..??

Possible duplicate of [In Mustache, How to get the index of the current Section](http://stackoverflow.com/questions/5021495/in-mustache-how-to-get-the-index-of-the-current-section) — James A Mohler, Apr 10 '16 at 18:01

score 16 · Answer 1 · answered Jul 07 '11 at 23:48

Handlebars no longer necessary. You can use the high order sections in current mustache. These basically let you call a function with the contents of the section as an argument. If that section is inside an iteration it will be called for each item in an iteration.

Given this template (kept in a script tag for convenience & clarity)

<script type="text/html" id="itemview">
    <table width="100%" border="0" cellspacing="0" cellpadding="3">
        <tbody>
            {{#items}}
                <tr>
                    <td>{{#count}}unused{{/count}}</td>
                    <td>{{.}}</td
                </tr>
            {{/items}}
        </tbody>
    </table>
</script>

...and the following code, you can build a numbered list.

function buildPage(root)
{
    var counter = 0;
    var data = {
        'items': [ 'England', 'Germany', 'France' ],

        'count' : function () {
            return function (text, render) {
                // note that counter is in the enclosing scope
                return counter++;
            }
        }
    };

    // fetch the template from the above script tag
    var template = document.getElementById('itemview').innerHTML;
    document.getElementById("results").innerHTML = Mustache.to_html(template, data);
}

Output: 0 England 1 Germany 2 France

score 7 · Answer 2 · answered Mar 21 '16 at 14:02

7

Use {{@index}} inside iteration.

{{#data}}
    <p>Index is {{@index}}</p>
{{/data}}

answered Mar 21 '16 at 14:02

Dmitrii Malyshev

621
9
12

1

This method does not work if using pure `Mustache`. I believe this has either always been a `Handlebar` exclusive feature, or has been removed from pure `Mustache` for at least five years now. – cyqsimon Apr 07 '20 at 02:32

score 0 · Answer 3 · edited May 23 '17 at 11:53

0

you could use the handlebars extension to mustache and write a helper function that bumps a counter.

I put more explanation here. In Mustache, How to get the index of the current Section

edited May 23 '17 at 11:53

Community

1
1

answered Feb 22 '11 at 03:23

mattsh

4,305
6
20
18

score 0 · Answer 4 · answered Apr 07 '20 at 02:43

Alternatively just add a counter to your array... I understand this is an ugly solution but it's the most readable and gets the job done.

const myData = ["Alpha", "Bravo", "Charlie", "Delta", "Echo"];

tags.myArr = [];
for (let i = 0; i < myData.length; i++) {
  tags.myArr.push({index: i, data: myData[i]});
}
return Mustache.render(template, tags);

{{#myArr}}
  Number {{index}}: {{data}}
{{/myArr}}

Is there a way to set a counter in a mustache iteration?

4 Answers4