How to make @index start from 1 instead of 0

{{#Each}}
{{@index}}
{{/Each}}

Any one knows how to make @index start from 1 instead of 0? Thanks

That’s a weird idea, why do you want/need your index to start at 1?

I’d like to create a table with an index for client to read. Would like to make it more human-read friendly, that starts from 1.

This should do it. It shows incremented @index while keeping the value of @index unchanged.

(listing contains Steve’s fix)

{{#each}}
    {{incremented @index}}
{{/each}}

Template.registerHelper('incremented', function (index) {
    index++;
    return index;
});

But imho, it can make things much more confusing if you do things like <a href="/product/0">Product 1</a>.

Typos:

{{#each}}
    {{incremented @index}}
{{/each}}

@brajt @steve Many thanks!!

Ah, you’re right, @Steve, thanks. I’m too used to Jade where I don’t need to close each.

OCD, so I feel bad about poor index function parameter which got changed in the function body :smiley:

2 Likes

I’m referencing @brajt’s comment above to try to increment a value in an #each loop using a helper, but it seems like the @index variable in the loop is not being passed.

Here’s what the loop looks like:

{{#each thing.subthing}}
    {{offset @index}}
{{/each}}

And here’s the helper:

Template.mytemplate.helpers({
    "offset": function(index){
        index += 5;
        console.log("index = "+index);
        return index;
    }
});

The console is logging “undefined”, even if I check the value of index before modifying it.

Any idea what’s going wrong? I’m using meteor 1.2.1, so it’s not an issue with @index not being available to me. The only thing I can think is that the @index is of the parent object (‘thing’) not the child?

5 months later… it’s amazing how fast the time flows, it feels for me as if I started doing Meteor just a few weeks ago.

To be honest I’ve never tested this code, as I never use @index in my own applications. So yeah, it may not work at all.

I can suggest to try to make the content of {{#each}} loop a separate template and test if it works inside of it. Or to try a solution with global template that I used in the original code.

I don’t think it should be the case as {{#each}} should only see what’s inside of thing.subthing.

I have tested the code @brajt provided above. It worked for me. I have also checked your code. It works too. Have you tried to make it in a global scale as @brajt suggested?

1 Like

As @shock mentioned, it’s a bad practice to change parameter inside of the function, like I did. You should copy the value to another variable and use it instead, or just do return index + 5.

Thanks @naoziwatele and @brajt. Agree on not changing the parameter in the function.

It’s still not working for me though… @naoziwatele, can you elaborate on how you tested the code or paste your working code here? I’d really appreciate it as I’m really confused about why this doesn’t work - it seems very simple…

There are not much difference to the code above, except with few extra markups. Hope it could help.

Thanks @naoziwatele. It actually looks like my problem is more serious than I thought. As a test I did the following:

  {{#each thing}}
	{{offset @index}}
  {{/each}}

using the following helper:

Template.mytemplate.helpers({
   "offset": function(index){
      console.log(index);
   },
});

…and index is tracing undefined.

I’ve double checked my meteor version with meteor --version and it’s definitely 1.2.1, so I’m at a loose end. Anyone have any thoughts at all?

Do you have a thing helper?

I just ran this example (with a thing helper returning an array) and it worked correctly.

Template.mytemplate.helpers({
  thing() {
    return ['a', 'b', 'c'];
  },
  offset(i) {
    console.log(i);
    return i;
  }
});
1 Like

Thanks @robfallows and everyone else.

As it turns out, it must have been a versioning issue with something. I ran meteor --update and everything is now working.