There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

@each

Syntax

(event selector:event) {
@each (item, item2, ...) in (array|object) {
(target selector) {
}
(target selector) {
}
(...)
}
}

There is currently one command for looping arrays or objects, and that command is the @each loop. It's quite flexible and can work with different types of variables. In JavaScript there are various different sorts of loops to remember and choose from, but here we've put the most common requirements into one command for the sake of making things simpler to work with and easier to remember.

@each loops work with ajax return variables in addition to variables defined in the config. Variables in loops, like all Active CSS variables, are either scoped to the document or a component scope.

This command provides looping functionality that can be used for handling ajax responses, such as search results rendering an array of data from the server into multiple components. On this website it is used to render the search results, and in a couple of other places.

The @each loop is placed outside of target selectors and inside the event selector (see the syntax block above).

Nested @each loops are allowed (see the example at the bottom of this page).

@each loops cannot wrap around action commands within target selectors - they are only allowed outside target selectors unless there is actually no target selector (in the case of a top-level action command that applies only to the event selector).

@each loops, target selectors and action commands are all run in sequence as they appear in the config.

There now follows examples of possible uses of the @each loop syntax, with both arrays and objects.

@each - basic use

@each - nested array

@each - array of objects

@each - with object

@each - within component

@each - no target selector

@each - nested loops