{#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 — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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}.
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, and the Sveltejs Academy course includes 4 lessons in total. 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.
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; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
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