How to make @index start from 1 instead of 0

[naoziwatele]

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

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

[fvilers]

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

[naoziwatele]

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.

[brajt]

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>.

[Steve]

Typos:

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

[naoziwatele]

@brajt @steve Many thanks!!

[brajt]

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

[shock]

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

[aragorn23]

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?

[brajt]

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.

@aragorn23

The only thing I can think is that the @index is of the parent object (‘thing’) not the child?

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

[naoziwatele]

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?

[brajt]

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.

[aragorn23]

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…

[naoziwatele]

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

[aragorn23]

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?

[robfallows]

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;
  }
});

[aragorn23]

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.