Articles in this section

@first data variable

Tom Santiago
Updated

The @first data variable evaluates to true for the first element when iterating over an array or object with #each. Use it inside an {{#if @first}} block to conditionally render content only on the first iteration.

Syntax

{{#each field}}{{#if @first}} expr {{/if}}{{/each}}

Examples

Render the first key of an object

{{#each @root.child}}
  {{#if @first}}{{@key}}{{/if}}
{{/each}}

Input:

{
  "child": {
    "childTitle": "Child Title",
    "childBody": "Child Body"
  }
}

Output: childTitle

@first is true for childTitle, the first key in the child object. childBody is skipped.

Render the index of the first array element

{{#each array}}
  {{#if @first}}{{@key}}{{/if}}
{{/each}}

Input:

{ "array": [1, 2, 3, 4] }

Output: 0

Array iteration always starts at index 0. @first is true only for that first element regardless of the array's content or length.

Usage notes

  • @first is only available inside a #each block. It has no meaning outside of iteration.
  • When iterating over an array, @first corresponds to index 0.
  • When iterating over an object, @first corresponds to the first key in the object.
  • To access @first from a parent #each loop inside a nested #each block, use {{@../first}}.
  • @last is the companion variable for the final iteration. It is only available when iterating over arrays, not objects.