How do I access an access array item by index in handlebars?

Question

I am trying to specify the index of an item in an array within a handlebars template:

{
  people: [
    {"name":"Yehuda Katz"},
    {"name":"Luke"},
    {"name":"Naomi"}
  ]
}

using this:

<ul id="luke_should_be_here">
{{people[1].name}}
</ul>

If the above is not possible, how would I write a helper that could access a spefic item within the array?

Arjan · Accepted Answer · 2015-10-23 07:12:51Z

466

Try this:

<ul id="luke_should_be_here">
{{people.1.name}}
</ul>

edited Oct 23, 2015 at 7:12

Arjan

23.8k12 gold badges65 silver badges71 bronze badges

answered Nov 8, 2011 at 0:47

dhorrigan

4,7091 gold badge17 silver badges2 bronze badges

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

11 Comments

Olivier Lalonde Over a year ago

I'm getting Expecting 'ID' error with {{user.links.websites.1}} or {{user.links.websites.0}}

Matt Over a year ago

@OlivierLalonde, I had to use something like {{ websites.[0] }} .

Arjan Over a year ago

Indeed, @Matt, that is not just some lucky format, but is kind of the documented syntax. (See my answer.)

aceofspades Over a year ago

For ember.js, I had to do something like people.content.1.name

dudewad Over a year ago

@lukemh A LOT of stuff in handlebars is either poorly documented or not documented anywhere. Yayyyy....

|

ptim · Accepted Answer · 2022-09-01 03:59:34Z

382

The following, with an additional dot before the index, works just as expected. Here, the square brackets are optional when the index is followed by another property:

{{people.[1].name}}
{{people.1.name}}

However, the square brackets are required in:

{{#with people.[1]}}
  {{name}}
{{/with}}

In the latter, using the index number without the square brackets would get one:

Error: Parse error on line ...:
...     {{#with people.1}}                
-----------------------^
Expecting 'ID', got 'INTEGER'

As an aside: the brackets are (also) used for segment-literal syntax, to refer to actual identifiers (not index numbers) that would otherwise be invalid. More details in What is a valid identifier?

(Tested with Handlebars in YUI.)

2.xx Update

You can now use the get helper for this:

(get people index)

although if you get an error about index needing to be a string, do:

(get people (concat index ""))

edited Sep 1, 2022 at 3:59

ptim

15.8k10 gold badges87 silver badges106 bronze badges

answered Dec 4, 2012 at 13:30

Arjan

23.8k12 gold badges65 silver badges71 bronze badges

4 Comments

modulitos Over a year ago

This should be the answer because it is more thorough than the selected answer. Requiring square brackets when the index is at the end had me stuck for a while!

MarioAraya Over a year ago

this did the trick! thanks... the chosen answer above this didn't, please mark this as the correct.

Ferran Maylinch Over a year ago

The {{#with people.1}} solution worked for me, using com.github.jknack:handlebars:4.1.2.

v3nt Over a year ago

trying to find a way to adjust the index number so I can check a value from the previous item in the loop against this one. Any ideas?

FMQB · Accepted Answer · 2014-09-15 04:05:56Z

35

{{#each array}}
  {{@index}}
{{/each}}

answered Sep 15, 2014 at 4:05

FMQB

6735 silver badges12 bronze badges

2 Comments

Oscar Romero Over a year ago

Awesome, This is the correct answer. @index will give you the position in the array.

Anshu Saurabh Over a year ago

Correct answer, can anybody help me how can I print index starting with 1. By default it starts from 0.

Bret Weinraub · Accepted Answer · 2018-03-10 18:15:27Z

21

If undocumented features aren't your game, the same can be accomplished here:

Handlebars.registerHelper('index_of', function(context,ndx) {
  return context[ndx];
});

Then in a template

{{#index_of this 1}}{{/index_of}}

I wrote the above before I got a hold of

this.[0]

I can't see one getting too far with handlebars without writing your own helpers.

edited Mar 10, 2018 at 18:15

answered Sep 12, 2013 at 12:09

Bret Weinraub

2,39321 silver badges24 bronze badges

Comments

ChrisV · Accepted Answer · 2020-03-31 15:08:39Z

18

If you want to use dynamic variables

This won't work:

{{#each obj[key]}}
...
{{/each}}

You need to do:

{{#each (lookup obj key)}}
...
{{/each}}

see handlebars lookup helper and handlebars subexpressions.

edited Mar 31, 2020 at 15:08

ChrisV

9,1793 gold badges50 silver badges38 bronze badges

answered May 19, 2016 at 20:32

julesbou

5,7804 gold badges34 silver badges36 bronze badges

1 Comment

MegaTux Over a year ago

lookup worked here, even with an index an list from a previous block : {{lookup ../../btnPercentages @../index}}

user1378423 · Accepted Answer · 2014-06-25 13:29:39Z

10

Please try this, if you want to fetch first/last.

{{#each list}}

    {{#if @first}}
        <div class="active">
    {{else}}
        <div>
    {{/if}}

{{/each}}


{{#each list}}

    {{#if @last}}
        <div class="last-element">
    {{else}}
        <div>
    {{/if}}

{{/each}}

answered Jun 25, 2014 at 13:29

user1378423

5975 silver badges3 bronze badges

Comments

Fatih Acet · Accepted Answer · 2015-11-16 14:31:13Z

10

While you are looping in an array with each and if you want to access another array in the context of the current item you do it like this.

Here is the example data.

[
  {
    name: 'foo',
    attr: [ 'boo', 'zoo' ]
  },
  {
    name: 'bar',
    attr: [ 'far', 'zar' ]
  }
]

Here is the handlebars to get the first item in attr array.

{{#each player}}
  <p> {{this.name}} </p>

  {{#with this.attr}}
    <p> {{this.[0]}} </p>
  {{/with}}

{{/each}}

This will output

<p> foo </p>
<p> boo </p>

<p> bar </p>
<p> far </p>

answered Nov 16, 2015 at 14:31

Fatih Acet

29.8k9 gold badges55 silver badges58 bronze badges

2 Comments

Partha Roy Over a year ago

if the attr array has different number of elements for different objects then what will be the process to iterate through it ? for example : [ { name: 'foo', attr: [ 'boo', 'zoo' ] }, { name: 'bar', attr: [ 'far', 'zar','sar ] } ] then how are you going to show all the attr for every objects of the array ?

Fatih Acet Over a year ago

i didn't try it but i assume in {{#with this.attr}} this would work instead of this.[0]

José · Accepted Answer · 2014-07-16 12:45:11Z

1

The following syntax can also be used if the array is not named (just the array is passed to the template):

  <ul id="luke_should_be_here">
  {{this.1.name}}
  </ul>

answered Jul 16, 2014 at 12:45

José

3,2031 gold badge34 silver badges45 bronze badges

Comments

Sharukh Mastan · Accepted Answer · 2018-12-09 12:02:49Z

1

In my case I wanted to access an array inside a custom helper like so,

{{#ifCond arr.[@index] "foo" }}

Which did not work, but the answer suggested by @julesbou worked.

Working code:

{{#ifCond (lookup arr @index) "" }}

Hope this helps! Cheers.

answered Dec 9, 2018 at 12:02

Sharukh Mastan

1,59118 silver badges17 bronze badges

1 Comment

v3nt Over a year ago

how would you adjust the index value in this case? ie I want to compare a value from index and index - 1 (doesn't work). Thanks.

Collectives™ on Stack Overflow

How do I access an access array item by index in handlebars?

9 Answers 9

11 Comments

2.xx Update

4 Comments

2 Comments

Comments

1 Comment

Comments

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

11 Comments

2.xx Update

4 Comments

2 Comments

Comments

1 Comment

Comments

2 Comments

Comments

1 Comment

Linked

Related