extends ../reference.jade

block documentation
  h1 Iteration

  p Jade supports two primary methods of iteration, #[code each] and #[code while].

  h2 each

  p.
    Jade's first-class iteration syntax makes it easier to iterate over
    arrays and objects within a template:

  .row(data-control='interactive')
    .col-lg-6
      +jade
        :jadesrc
          ul
            each val in [1, 2, 3, 4, 5]
              li= val
    .col-lg-6
      +html
        :htmlsrc
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </ul>

  p You can also get the index as you iterate:

  .row(data-control='interactive')
    .col-lg-6
      +jade
        :jadesrc
          ul
            each val, index in ['zero', 'one', 'two']
              li= index + ': ' + val
    .col-lg-6
      +html
        :htmlsrc
          <ul>
            <li>0: zero</li>
            <li>1: one</li>
            <li>2: two</li>
          </ul>

  p Jade also lets you iterate over the keys in an object:

  .row(data-control='interactive')
    .col-lg-6
      +jade
        :jadesrc
          ul
            each val, index in {1:'one',2:'two',3:'three'}
              li= index + ': ' + val
    .col-lg-6
      +html
        :htmlsrc
          <ul>
            <li>1: one</li>
            <li>2: two</li>
            <li>3: three</li>
          </ul>

  p The object or array to iterate over is just plain JavaScript so it can be a variable or the result of a function call as well.

  h2 while

  p You can also use #[code while] to create a loop:

  .row(data-control='interactive')
    .col-lg-6
      +jade
        :jadesrc
          - var n = 0
          ul
            while n < 4
              li= n++
    .col-lg-6
      +html
        :htmlsrc
          <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ul>
