Loops

Task: repeat part of a page for each item of a list or each number of a range.

yaml

# Recipe: q:loop over a list, a range of numbers and comma-separated text.
paths:
  components: ./components

type="array" goes over a list, with index= naming the position from 0. type="range" counts from from to to, both included, by step. type="list" splits text by commas and trims each item.

xml

<q:component name="Loops">
  <q:set name="fruits" type="array" value='["Apple", "Banana", "Cherry"]' />

  <html>
  <body>
    <h2>A list</h2>
    <ol>
      <!-- index= names the position, from 0 -->
      <q:loop type="array" var="fruit" index="i" items="{fruits}">
        <li>{i + 1}. {fruit}</li>
      </q:loop>
    </ol>

    <h2>A range</h2>
    <p>
      <!-- from and to are both included -->
      <q:loop type="range" var="n" from="2" to="10" step="2">
        <span>[{n}]</span>
      </q:loop>
    </p>

    <h2>Text split by commas</h2>
    <ul>
      <q:loop type="list" var="tag" items="red, green , blue">
        <li>({tag})</li>
      </q:loop>
    </ul>
  </body>
  </html>
</q:component>

xml

<q:test name="a list, with each position" page="/">
  <test:visit />
  <test:expect text="1. Apple" />
  <test:expect text="3. Cherry" />
</q:test>

<q:test name="a range includes both ends" page="/">
  <test:visit />
  <test:expect text="[2] [4] [6] [8] [10]" />
</q:test>

<q:test name="list items lose the spaces around them" page="/">
  <test:visit />
  <test:expect text="(red) (green) (blue)" />
</q:test>

text

tests/loops.test.q
  PASS  a list, with each position
  PASS  a range includes both ends
  PASS  list items lose the spaces around them
3 passed, 0 failed

To loop over the rows of a query, see Several forms on one page. The rules: LOOP-5 and LOOP-6.

Loops ​

Loops