How can I get the index of an array in a Meteor template each loop?

Question

Say I have an object, someObject:

{
  foo: "apple",
  myArray: ["abc", "def"]
}

And a template helper that looks like this (and works fine):

getArray: function(){
  var self = this;
  self.myArray = self.myArray || [];    
  return self.myArray;
}

How should I construct the html to get the array index?

I've tried:

<template name="someObject"> // takes someObject as data
  {{#each getArray}}
    <div class="item" data-value="{{WHAT GOES HERE?}}">{{this}}</div>
  {{/each}}
</template>

In which case this successfully returns "abc" and "def". Which is good. But how can I get the index of the array to put into the attribute data-value?

I've tried this.index directly but it's undefined. I also tried using a helper:

<template name="someObject"> // takes someObject as data
  {{#each getArray}}
    <div class="item" data-value="{{getindex}}">{{this}}</div>
  {{/each}}
</template>

but in this helper getIndex when I console.log out this I see:

String {0: "a", 1: "b", 2: "c", length: 3}
String {0: "d", 1: "e", 2: "f", length: 3}

Is it possible to get the index?

Community · Accepted Answer · 2017-05-23 12:17:09Z

59

meteor >= 1.2

Spacebars gained a lot of functionality in 1.2, including a native @index. Helpers are no longer needed to solve this problem - you can simply do this:

{{#each getArray}}
  <div class="item" data-value="{{@index}}">{{this}}</div>
{{/each}}

or, if you want to use the index inside a helper:

{{#each getArray}}
  <div class="item" data-value="{{someHelper @index}}">{{this}}</div>
{{/each}}

meteor < 1.2

Sometime in the future, spacebars may offer the ability to determine the index directly in the template. However, as of this writing, the only way to get the index is to modify the result returned by the helper. For example you could have getArray return an array of objects which contain a value and an index, like this:

getArray: function() {
  var self = this;
  self.myArray = self.myArray || [];
  return _.map(self.myArray, function(value, index){
    return {value: value, index: index};
  });
}

And the template could use the index like this:

<template name="someObject">
  {{#each getArray}}
    <div class="item" data-value="{{index}}">{{value}}</div>
  {{/each}}
</template>

Also see this answer for a similar example with cursors.

It's worth mentioning that you probably don't need to store the index in the DOM itself via data-value, unless it's needed by an external plugin. As you can see in the example below, each item has a context with an index value. For more information, see this blog post.

Template.someObject.events({
  'click .item': function() {
    console.log(this.index);
  }
});

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jun 15, 2014 at 5:13

David Weldon

64.4k11 gold badges152 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Oliver Lloyd Over a year ago

Thanks for clearing that up. Note. the data attribute is required for something out of my ability (or desire) to edit so I have no choice.

earthling Over a year ago

Tried this on Meteor 1.2.0.2 and @index still returns undefined.

Barry Michael Doyle Over a year ago

How would you display @index + 1? Eg. start from 1 rather than zero?

David Weldon Over a year ago

You'll need to use a helper. In the example above, someHelper could be implemented to return the value of its argument + 1.

Christian Fritz · Accepted Answer · 2014-06-15 05:24:22Z

20

You can make this a reusable helper, too. It's handy to have:

JS:

UI.registerHelper('addIndex', function (all) {
    return _.map(all, function(val, index) {
        return {index: index, value: val};
    });
});

HTML:

{{#each addIndex somearray}}
<div>
   {{index}}: {{value}}
</div>
{{/each}}

answered Jun 15, 2014 at 5:24

Christian Fritz

21.5k3 gold badges48 silver badges82 bronze badges

Comments

Christian Fritz · Accepted Answer · 2015-05-08 15:14:45Z

9

This change is coming and you will be able to do {{@index}}. When meteor supports the most recent version of handlebars.

edited May 8, 2015 at 15:14

Christian Fritz

21.5k3 gold badges48 silver badges82 bronze badges

answered May 4, 2015 at 19:39

pcatre

1,8643 gold badges20 silver badges24 bronze badges

2 Comments

pcatre Over a year ago

At the time I wrote this it was not released yet. Probably that is still the case :/

kynan Over a year ago

This was release as part of Meteor 1.2

Erez Hochman · Accepted Answer · 2014-06-14 23:59:17Z

1

You can change getArray to return an array of tupples and store the index there.

answered Jun 14, 2014 at 23:59

Erez Hochman

1,7081 gold badge12 silver badges14 bronze badges

Comments

Patrick Mencias-lewis · Accepted Answer · 2015-07-28 22:09:58Z

0

Here is an example of how you can just add index to the object and as long as you didnt have a key named index before it shouldnt obstruct anything this way works only with arrays of objects. Now if you have a array of values you should use Christan Fritz answer

UI.registerHelper("withIndex", function(obj) {
  obj = obj || [];
  _.each(obj, function (object, index) {
    obj[index].index = index;
  });
  return obj;
});

{#each withIndex fields}}
   <div class="form-group field" data-index="{{index}}">
      <label for="{{name}}">{{title}}</label> 
    </div>
{{/each}}

answered Jul 28, 2015 at 22:09

Patrick Mencias-lewis

5746 silver badges16 bronze badges

Comments

jasenkoh · Accepted Answer · 2015-08-24 17:31:36Z

0

You can do it with underscore too, assuming that you have subscribed your template to array of objects

Template.yourTemplate.helpers({
  objectsWithIndex: function() {
    _.map(this.objects, function(value, key) {
      return _.extend(value, {
        index: key
      });
    });
    return this.objects;
  }
});

and in your html...

<template name="someObject">
  {{#each objectsWithIndex}}
    <div class="item" data-value="{{index}}">{{value}}</div>
  {{/each}}
</template>

answered Aug 24, 2015 at 17:31

jasenkoh

4,1812 gold badges21 silver badges24 bronze badges

Collectives™ on Stack Overflow

How can I get the index of an array in a Meteor template each loop?

6 Answers 6

meteor >= 1.2

meteor < 1.2

4 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

meteor >= 1.2

meteor < 1.2

4 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related