Nova · Layouts

Loop

A for node draws its do once for each element of a list. as names the element for the bindings inside, and key names the field that tells one element from another.

The action, as it is written

{
  id: 'loop',
  data: {
    members: [
      { id: 'm1', name: 'Ada' },
      { id: 'm2', name: 'Grace' },
      { id: 'm3', name: 'Linus' },
    ],
  },
  layout: {
    component: 'Stack',
    children: [
      {
        for: '$.members',
        as: 'member',
        key: 'id',
        do: { component: 'Text', children: '$member.name' },
      },
    ],
  },
}

Running herepress it

Ada

Grace

Linus

What is done to it

Nothing. It is only drawn.

What it then holds

{
  members: [
    { id: 'm1', name: 'Ada' },
    { id: 'm2', name: 'Grace' },
    { id: 'm3', name: 'Linus' },
  ],
}

What it then says

Ada
Grace
Linus

Output matches the expected value

Left: the action as the package ships it. Right: the same action running in this page, rendered with this site’s components. Below: the action run as the example specifies, on the installed package.