How to Access an Access Array Item by Index in Handlebars

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

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

Access handlebars array using index of loop

One solution I founded for this, I do not know how much good it is but It is working perfectly

Try this :)

{{#each categories}}
  <p>id: {{this.id}}</p>
  <p>name: {{this.name}}</p>
  <p>series id with helper:{{#with (lookup  ../series.[0].data 
  @index) }}{{this.id}}{{/with}}</p>
  <p>series name with helper: {{#with (lookup  ../series.[0].data 
  @index) }}{{this.name}}{{/with}}</p>
{{/each}}

Handlebars array access with dynamic index

Related to my answer on another question

---

You can use the built-in lookup helper:

The lookup helper allows for dynamic parameter resolution using Handlebars variables. This is useful for resolving values for array indexes.

Using lookup, your example could be written as

{{#each condition in conditions}}
    {{#with (lookup ../App.ops condition.op)}}
        {{name}}
    {{/with}}
{{/each}}

(Note that without knowledge of the structure of your data, I'm making an assumption about the location of App.ops.)

How do I access an array within an Object having dynamic index in handlebar?

Please use this in your .hbs file

  {{#each myobj as |item|}}
    {{#each item as |details|}}
      <p>{{details.order_no}}</p>
      <p>{{details.order_date}}</p>
    {{/each}}
  {{/each}}

Handlebars access nested array values by specific index's value

First, I would remove the {{#each this.emailAddress}} line from the template. This iterates over each property of each emailAddress Object - ie., .name and .address.

{{#each this.tos}}
    <td>
        {{this.emailAddress.name}}(this.emailAddress.address)}}
    <td>
{{/each}}

The above will output the data we want but will put each emailAddress in its own <td>. However, your expected output has all emailAddresses within each tos Array to be within a single <td> separated by a <br>. We can use Handlebars' @last data variable to conditionally render the <br> for each but the last item in the tos Array:

{{#each messages}}
    <tr>
        <td>
            {{#each this.tos}}
                {{this.emailAddress.name}}({{this.emailAddress.address}})
                {{#if @last}}{{else}}<br>{{/if}}
            {{/each}}
        </td>
    </tr>
{{/each}}

Note that the <td> has to contain the {{each this.tos}} in order for the Objects within a tos to be rendered within a single <td>. Also, since we want a <tr> for each Object in messages we must move the <tr> to within the {{#each messages}} line.

I have created a JS Fiddle for your reference.

Access array index from output of helper in handlebars

I can think of two ways, but there might be better ways (haven't used handlebars recently)

Either use #with to get the array and then access its elements with []

{{#with (split title "==FUBC==")}}
    {{log [0]}}
{{/with}}

or directly use the lookup helper.

{{log (lookup (split title "==FUBC==") 1)}}

---

Related Topics