Articles in this section

@key data variable

Tom Santiago
Updated

The @key data variable returns the current key name when iterating over an object with #each, or the numeric index when iterating over an array. Use it to output field names, build labeled lists, or reference position within a loop.

Syntax

{{#each field}}{{@key}}{{/each}}

Examples

Return numeric indexes from an array

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

Input:

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

Output: 0 1 2 3

When iterating over an array, @key returns the zero-based numeric index of each element regardless of the element's value or type.

Return key names from a nested object

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

Input:

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

Output:

childTitle
childBody

When iterating over an object, @key returns the name of each key rather than a numeric position.

Return all top-level key names from the root object

{{#each @root}}{{@key}}{{/each}}

Input:

{
 "title": "My New Post",
 "body": "This is my first post!",
 "array": [1, 2, 3, 4],
 "message": "This is the message.",
 "child": {
 "childTitle": "Child Title",
 "childBody": "Child Body"
 }
}

Output: title body array message child

Using @root as the #each target iterates over all top-level keys in the context object.

Usage notes

  • @key is only available inside a #each block. It has no meaning outside of iteration.
  • When iterating over an array, @key returns the numeric index (starting at 0), not the element's value.
  • When iterating over an object, @key returns the key name as a string.
  • To retrieve the numeric position of the current element regardless of whether you're iterating over an array or object, use @index data variable instead.
  • To access @key from a parent #each loop inside a nested #each block, use {{@../key}}.