Print the loop index in Meteor.js templates

Question

I have a list of objects in meteorjs which I am iterating in meteorjs templates like

{{#each objects}}
{{/each}}

In the template I want to print the number of the loop iteration. That is, if the length of the objects list is 100 I want to print the numbers from 1 to 100 in the template. How can I do this?

All the answer so far are correct but in the scenario of editing 1 row, it triggers the rendering for all the rows which is very inefficient. — Mário, Feb 01 '15 at 17:50

Tarang · Accepted Answer · 2014-03-03T09:47:34.160

11

You can't do this at the moment without giving in an index in your helper, i.e

Template.yourtemplatename.object_with_index = function() {
    var objects = Template.yourtemplatename.objects();

    for(var i = 0; i=objects.length; i++) {
        objects[i].index = i;
    }

    return objects;
}

Then do:

{{#each object_with_index}}
    <p>This is number {{index}}</p>
{{/each}}

Not the prettiest way, but other variations would basically do the same thing under the hood (e.g if you used a map)

edited Mar 03 '14 at 09:47

answered Mar 03 '14 at 09:30

Tarang

75,157
39
215
276

1

I think it should be `objects[i].index = i;` in the loop. – Tobias Mar 03 '14 at 09:39
1

Yup thats right! Updated it with that – Tarang Mar 03 '14 at 09:47
thanx man, it works and it shuld be `objects[i].index=i+1` because index always starts with 1 – Sajid Ahmad Mar 04 '14 at 07:02
2

I think there's an error in the loop: `for(var i = 0; i=objects.length; i++)` Shouldn't it be: `for(var i = 0; i < objects.length; i++)` ? – Gavin Sep 26 '14 at 16:58
This code works with `{{#each each_path_with_index 'objects'}}` and is registered globally. Also adds `humanIndex` to give you a 1-indexed counter. `Template.registerHelper('each_path_with_index', function(keyPath) { var objects = _.getPath(this, keyPath); _.each(objects, function(element, i, list) { objects[i].index = i; objects[i].humanIndex = i + 1; }); return objects; });` – otupman Jan 23 '15 at 20:30
This did not work for me, saying _.getPath is not a function (yes the underscore package is intalled) so I made my helper in the same spirit but with jquery, here it is : ```UI.registerHelper('addIndex', function(thatArray) { if (thatArray && thatArray.length) { $.each(thatArray, function (position, thatObject) { thatObject.index = position; thatArray[position] = thatObject; }); return thatArray; } });``` – Guidouil Apr 27 '15 at 13:49

score 8 · Answer 2 · answered Jul 21 '14 at 12:16

8

If you objects is a cursor, you can use its map method:

Template.yourtemplatename.objects = YourCollection.find().map(function(document, index){
    document.index = index;
    return document;
});

answered Jul 21 '14 at 12:16

waitingkuo

89,478
28
112
118

score 1 · Answer 3 · edited Jun 29 '15 at 04:36

I made a global helper that add an index to an array :

UI.registerHelper('addIndex', function(thatArray) {
  if (thatArray && thatArray.length) {
    $.each(thatArray, function (position, thatObject) {
      thatObject.index = position;
      thatArray[position] = thatObject;
    });
    return thatArray;
  }
});

and then you call it like that :

{{#each addIndex arrayWithoutIndex}}
  The current value is at this index number : {{index}}
{{/each}}

Print the loop index in Meteor.js templates

3 Answers3

Linked