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

ID : 10089

viewed : 19

Tags : javascripthandlebars.jsjavascript

Top 5 Answer for javascript - How do I access an access array item by index in handlebars?

vote vote

90

Try this:

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

85

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

70

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

67

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.

vote vote

57

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.

Top 3 video Explaining javascript - How do I access an access array item by index in handlebars?

Related QUESTION?