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

javascript

handlebars

array-access

javascript-templates

byAlex Kataev·Dec 3, 2024

To access array items by index in Handlebars, use the lookup helper:

{{lookup array index}}

Replace array with your array variable and index with the numeric index. For instance:

{{!-- Access 'banana' from ['apple', 'banana', 'carrot'] --}}
{{lookup fruits 1}}

This outputs 'banana' because, like discount sales during black friday, index counting starts at 0.

Direct indexing using dot notation

When you're on a first-name basis with your array item, crack into it directly without helpers using dot notation:

{{people.1.name}}

Here, 1 is the index inside the people array, and .name is your friendly neighborhood key.

Custom helpers for the pros

If your array indexing is less about flirting and more about business, you may want to take your relationship further with a custom helper:

// You make me want to be a better person... uh I mean function.
Handlebars.registerHelper('getAtIndex', function (array, index) {
  return array[index];
});

This "flirts" with the third person in your people array:

{{getAtIndex people 2}}

Dynamic array access - Keep things spicy

If you want to keep your index guessing (and avoid any "you're too predictable" drama), then lookup helper comes to your rescue:

{{lookup people someDynamicIndex}}

Here, someDynamicIndex is your honest-to-God chosen index.

Loop it over with `@index` and `#each`

Unwrap your array items one by one with @index and the #each loop like it's Christmas morning:

{{#each people}}
  Person {{this}} is at the position {{@index}}.
{{/each}}

Square brackets for explicit indexing

You know the old saying, "With great power comes great #with". Here's an example:

{{#with (lookup people 1)}}
  {{name}} is in apartment {{@../index}}.
{{/with}}

This puts you in the second person’s context (don't read into this too much, it's purely platonic).

Be polite, handle your index

Unlike your mean colleagues, Handlebars needs careful handling. If your index is anticipated as a number but enters like a bull in a china shop as a string, that's a recipe for disaster. Here's a-made-for-tv-drama helper function to handle this:

Handlebars.registerHelper('concatIndex', function (index) {
  return '' + index;
});

And the polite usage is:

{{lookup people (concatIndex someDynamicIndex)}}

Subexpressions, you showoff!

Subexpressions are the party tricks of the Handlebars world - complex, impressive, and a surefire crowd-pleaser.

{{lookup (lookup people 1) 'address.street'}}

Every party needs a street, right? And you just fetched it.

Visualization

Visualise your handlebars array acccess like a kid in a candy store. The array is the candy rack, your item lives in a candy box (🍬), your index is like the little numbered tag below:

🍫 🍬 🍭 🍦 🍮 🍩 🎂
  0    1   2   3   4   5   6

With your index you directly point to your favorite candy:

{{candy.[3]}} // Get me that 🍦, please!

Best practices - Keeping it on fleek

Handlebars is the cool kid on the block, but like all cool kids, it has its quirks. Here are a few tips for accessorizing your Array in style:

Don't overcomplicate expressions. If your access logic looks like a space mission, consider moving it into a custom helper.
Be careful with named indexes. Using {{people.John}} might seem like a good idea, but remember - not everyone is called John.
Play nice with different Handlebars versions. Those shapeshifters can throw a curveball at your syntax.
Learn from your peers. If an answer on Stackoverflow has handles similar to yours, give it a read for community wisdom.