Lesson 05 of 10

Loops & Iteration

Render lists of items dynamically with {{#each}} blocks. Learn to iterate over arrays, access loop helpers like @index and @first, and generate repetitive HTML without copy-pasting.

In This Lesson

  1. Basic Loops
  2. Looping Primitives
  3. Looping Objects
  4. Loop Helper Variables
  5. Components in Loops
  6. Real-World Examples
  7. Checkpoint

Basic Loops

The {{#each}} block iterates over an array defined in your data block.

Syntax .orb 
{{#each arrayName}}
  <!-- This HTML repeats for each item -->
{{/each}}

Looping Primitive Arrays

For arrays of strings or numbers, use {{ this }} to access the current item.

String Array Loop .orb 
<script data>
({
  fruits: ["Apple", "Banana", "Cherry", "Dragonfruit"]
})
</script>

<ul>
  {{#each fruits}}
    <li>{{ this }}</li>
  {{/each}}
</ul>

Output:

  • Apple
  • Banana
  • Cherry
  • Dragonfruit

Looping Object Arrays

For arrays of objects, access each property by name inside the loop:

Object Array Loop .orb 
<script data>
({
  team: [
    { name: "Alice", role: "Designer", avatar: "🎨" },
    { name: "Bob", role: "Developer", avatar: "💻" },
    { name: "Carol", role: "PM", avatar: "📋" }
  ]
})
</script>

<div class="team-grid">
  {{#each team}}
    <div class="member">
      <span class="avatar">{{ avatar }}</span>
      <h3>{{ name }}</h3>
      <p>{{ role }}</p>
    </div>
  {{/each}}
</div>

Output:

🎨

Alice

Designer

💻

Bob

Developer

📋

Carol

PM

Loop Helper Variables

Inside an {{#each}} block, you get special helper variables:

VariableTypeDescriptionExample (3 items)
{{ this }}anyCurrent item value (for primitive arrays)"Apple"
{{ @index }}number0-based index0, 1, 2
{{ @number }}number1-based index (human-friendly)1, 2, 3
{{ @first }}string"true" if first item, "" otherwise"true", "", ""
{{ @last }}string"true" if last item, "" otherwise"", "", "true"
{{ @count }}numberTotal number of items3
Using Loop Helpers .orb 
<script data>
({
  steps: ["Install", "Configure", "Build", "Deploy"]
})
</script>

<ol>
  {{#each steps}}
    <li>
      Step {{ @number }} of {{ @count }}: {{ this }}
      {{#if @last}} 🎉{{/if}}
    </li>
  {{/each}}
</ol>

Output:

  1. Step 1 of 4: Install
  2. Step 2 of 4: Configure
  3. Step 3 of 4: Build
  4. Step 4 of 4: Deploy 🎉
💡

Pro tip: Use {{ @first }} and {{ @last }} with {{#if}} to add special styling to the first or last item in a list.

Components in Loops

This is where loops become really powerful — generate components dynamically:

Components + Loops .orb 
<script data>
({
  features: [
    { title: "Fast", desc: "Zero runtime JavaScript" },
    { title: "Simple", desc: "Just HTML with superpowers" },
    { title: "Flexible", desc: "Build anything you want" }
  ]
})
</script>

<div class="features-grid">
  {{#each features}}
    <use component="card"
      title="{{ title }}"
      description="{{ desc }}" />
  {{/each}}
</div>

Three card components generated from data! Change the array and the page updates automatically.

Real-World Examples

Navigation menu

Dynamic Nav .orb 
<script data>
({
  navLinks: [
    { label: "Home", href: "/" },
    { label: "About", href: "/about" },
    { label: "Blog", href: "/blog" },
    { label: "Contact", href: "/contact" }
  ]
})
</script>

<nav>
  {{#each navLinks}}
    <a href="{{ href }}">{{ label }}</a>
  {{/each}}
</nav>

Tag cloud

Tag Cloud .orb 
<script data>
({ tags: ["HTML", "CSS", "Static", "Fast", "Modern"] })
</script>

<div class="tags">
  {{#each tags}}
    <span class="tag">#{{ this }}</span>
  {{/each}}
</div>

✅ Lesson 5 Checkpoint

You should now be able to:

  1. Loop over primitive arrays with {{#each}} + {{ this }}
  2. Loop over object arrays and access properties by name
  3. Use all 6 loop helpers: @index, @number, @first, @last, @count, this
  4. Generate components inside loops with dynamic props
← Previous Data & Variables