Nova · Layouts

Conditional in a loop

A condition inside a for reads the element of that turn, so each row decides for itself.

The action, as it is written

{
  id: 'conditional-in-loop',
  data: {
    seats: [
      { id: 'C4', taken: true },
      { id: 'C5', taken: false },
      { id: 'C6', taken: true },
    ],
  },
  layout: {
    component: 'Stack',
    children: [
      {
        for: '$.seats',
        as: 'seat',
        key: 'id',
        do: {
          if: '$seat.taken',
          then: { component: 'Text', children: '{{$seat.id}} is taken' },
          else: { component: 'Text', children: '{{$seat.id}} is free' },
        },
      },
    ],
  },
}

Running herepress it

C4 is taken

C5 is free

C6 is taken

What is done to it

Nothing. It is only drawn.

What it then holds

{
  seats: [
    { id: 'C4', taken: true },
    { id: 'C5', taken: false },
    { id: 'C6', taken: true },
  ],
}

What it then says

C4 is taken
C5 is free
C6 is taken

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.