Nova · Layouts

Nested loops

A loop inside a loop. The inner one reads the outer one's element as well as its own.

The action, as it is written

{
  id: 'nested-loops',
  data: {
    rows: [
      { name: 'A', seats: [1, 2] },
      { name: 'B', seats: [1, 2, 3] },
    ],
  },
  layout: {
    component: 'Stack',
    children: [
      {
        for: '$.rows',
        as: 'row',
        key: 'name',
        do: {
          for: '$row.seats',
          as: 'seat',
          do: { component: 'Text', children: '{{$row.name}}{{$seat}}' },
        },
      },
    ],
  },
}

Running herepress it

What is done to it

Nothing. It is only drawn.

What it then holds

{
  rows: [
    { name: 'A', seats: [1, 2] },
    { name: 'B', seats: [1, 2, 3] },
  ],
}

What it then says

A1
A2
B1
B2
B3

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.