{#each} with Index and Key
Loop over arrays and objects, accessing index and key values.
{#each} with Index and Key is a free Sveltejs Academy lesson on CoddyKit. This is lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, and your progress syncs across the web and the CoddyKit app. The Sveltejs Academy course includes 4 lessons in total.
The each Block
{#each list as item} iterates over an array and renders the markup once per element.
{#each colors as color}
<li>{color}</li>
{/each}Destructuring
Destructure the item shape inline for cleaner templates.
{#each users as { id, name }}
<li>{name}</li>
{/each}Index Variable
Add a second binding for the zero-based index.
{#each items as item, i}
<li>{i + 1}. {item}</li>
{/each}Keyed each
Provide a key after the item with (item.id) so Svelte can match items across updates.
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}Why Keys Matter
Without keys, reordering or filtering can confuse Svelte and reset child state. Keys keep DOM nodes stable.
Else Block
{:else} after the iteration body renders when the list is empty.
{#each items as item}
<li>{item}</li>
{:else}
<li>No items yet.</li>
{/each}Iterating Objects
To iterate an object, convert it to entries first.
{#each Object.entries(map) as [key, value]}
<li>{key}: {value}</li>
{/each}Sets and Maps
Wrap them in [...set] or [...map] to iterate.
Nested each
Nest {#each} blocks for two-dimensional data.
{#each rows as row}
{#each row as cell}<td>{cell}</td>{/each}
{/each}Closing Tag
Always close with {/each}. Misplaced closes cause compile errors.
Performance Tip
Use keys on lists that change frequently. They make reordering O(n) instead of O(n^2).
Quick Check
What is the role of (item.id) in an each?
Recap
{#each} iterates arrays, supports index and key bindings, and renders an empty-state {:else}.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
Frequently Asked Questions
Is the “{#each} with Index and Key” lesson free?
Yes — the full text of “{#each} with Index and Key” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO. The Sveltejs Academy course includes 4 lessons in total.
What will I learn in “{#each} with Index and Key”?
Loop over arrays and objects, accessing index and key values. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
How long does the “{#each} with Index and Key” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- {#if} {#else if} {#else}
- {#each} with Index and Key
- {#key} for Forcing Re-render
- Nested {#each} and Keyed Updates