Array element index in Mustache.js

Question

This is what I would like to do in Mustache.js but not seeing how with the documentation.

var view = {items:['Mercury','Venus','Earth','Mars']}; var template = "<ul> {{#items}}<li>{{i}} - {{.}}</li>{{/items}} </ul>"; var html = Mustache.to_html(template,view); 

Required Conclusion:

 <ul> <li>0 - Mercury</li> <li>1 - Venus</li> <li>2 - Earth</li> <li>3 - Mars</li> </ul> 

Answer 1

Alternative solution without cheating Mustache.js

Instead of cheating a mustache, you can use <ol></ol> instead of <ul></ul> , which will be the prefix of each element index+1 .

If you want to use css to change the starting number to 0, it will be displayed exactly as you want. You can even change dot after the number to something like " - " , and the problem will be solved.

 <ol> <li>Mercury</li> <li>Venus</li> <li>Earth</li> <li>Mars</li> </ol> 

Above will be displayed as:

 1. Mercury 2. Venus 3. Earth 4. Mars 

---

Mustache.js way to do it

The correct method, if you want to do this in a mustache, is to convert an array of strings to an array of objects where there is an index and a string value.

 // I wrote this from the back of my head, it untested and not guaranteed // to work without modifications, though the theory behind it is valid. var array = ["123","stackoverflow","abc"]; var obj_array = []; for (idx in array) obj_array.push ({'index': idx, 'str': array[idx]}); var view = {items: obj_array}; var template = "<ul>{{#items}}<li>{{index}} - {{str}}</li>{{/items}}</ul>"; var html = Mustache.to_html(template,view); 

Answer 2

Looking for a quick solution?

Just add index function

 var data = { items: [{ name: Aliasghar , grade: 19 }, { name: Afagh , grade: 20 }] , index: function() { return ++window['INDEX']||(window['INDEX']=0); } } 

and your template might look like this:

 {{#items}} {{index}} -- {{name}} is {{grade}} {{/items}} 

---

How it works

We add index: function(){} to the data, and we use it as a regular function in a template. This function adds a key to the window object, which is globally accessible; then increases it one by one.

For use with multiple lists.

Note that if you are using several templates one after another, you need to either reset window['INDEX'] or change it to something else, for example window['YEKI_DIGE'] . Another way to do this is to add a resetIndex function. Here's how to do it:

 var data = { items: [{ name: Aliasghar , grade: 19 }, { name: Afagh , grade: 20 }] , index: function() { return ++window['INDEX']||(window['INDEX']=0); } , resetIndex: function() { window['INDEX']=null; return; } } 

and your template might look like this:

 {{#items}} {{index}} -- {{name}} is {{grade}} {{/items}} {{resetIndex}} 

Inspired by this answer: https://stackoverflow.com/a/4158261/from-dave-in-java/index.html

Answer 3

If you can use handlebars.js, you can use the partially mentioned in this context: https://gist.github.com/1048968

Link: In Mustache, How to get the index of the current section

Answer 4

If you want to access the index several times per element, I would suggest something like the following.

 var data = { items: [{ name: Aliasghar , grade: 19 }, { name: Afagh , grade: 20 }] , setUpIndex: function() { ++window['INDEX']||(window['INDEX']=0); return; } , getIndex: function() { return window['INDEX']; } , resetIndex: function() { window['INDEX']=null; return; } } 

• Use the restIndex function before repeating each list in Mustache.
• Use the setUpIndex function at the beginning of each item in the list to configure the index for that item.
• Use the getIndex element to access the index.

Consider this as an example.

 {{resetIndex}} {{#items}} {{setUpIndex}} {{getIndex}}. {{name}} is at index {{getIndex}} {{/items}} 

Note that you can access the index more than once per element without getting the wrong value.

Answer 5

(Tested in node 4.4.7, mustache 2.2.1.)

If you need a nice clean functional way that doesn't include global variables or mutates the objects themselves, use this function;

 var withIds = function(list, propertyName, firstIndex) { firstIndex |= 0; return list.map( (item, idx) => { var augmented = Object.create(item); augmented[propertyName] = idx + firstIndex; return augmented; }) }; 

Use it when you collect your presentation;

 var view = { peopleWithIds: withIds(people, 'id', 1) // add 'id' property to all people, starting at index 1 }; 

The best approach to this approach is that it creates a new set of viewmodel objects using the old set as prototypes. You can read person.id just as you would read person.firstName . However, this function does not change your people objects at all, so other code (which may have relied on the ID property while not there) will not be affected.

Answer 6

You can use Handlerbars.js, then

 Handlebars.registerHelper("inc", function (value, options) { return parseInt(value) + 1; }); 

Use it in HTML

 {{inc @@index}} 

Answer 7

converting to a map from an array is also another successful option. [ https://newfivefour.com/javascript-mustache-index-in-array.html†[1]

https://newfivefour.com/javascript-mustache-index-in-array.html