CODEWITHSUNDEEP
javascripthandlebars.js
lukemh
lukemh

Reputation: 5323

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

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?

Upvotes: 331

Views: 247751

Answers (9)

Arjan
Arjan

Reputation: 23529

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 ""))

Upvotes: 378

julesbou
julesbou

Reputation: 5780

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.

Upvotes: 18

Sharukh Mastan
Sharukh Mastan

Reputation: 1591

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.

Upvotes: 1

Bret Weinraub
Bret Weinraub

Reputation: 2283

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.

Upvotes: 20

Fatih Acet
Fatih Acet

Reputation: 29529

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>

Upvotes: 10

dhorrigan
dhorrigan

Reputation: 4699

Try this:

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

Upvotes: 465

FMQB
FMQB

Reputation: 673

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

Upvotes: 35

Jos&#233;
Jos&#233;

Reputation: 3164

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>

Upvotes: 1

user1378423
user1378423

Reputation: 597

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

Upvotes: 10

Related Questions