svelte/documentation/docs/03-template-syntax/03-each.md

title: {#each ...}

<!--- copy: false  --->
{#each expression as name}...{/each}

<!--- copy: false  --->
{#each expression as name, index}...{/each}

Iterating over values can be done with an each block. The values in question can be arrays, array-like objects (i.e. anything with a length property), or iterables like Map and Set — in other words, anything that can be used with Array.from. For reactive values, changes in state are determined by comparing old and new items at the same position in the iterated sequence. As such, an "unkeyed" each block is best suited for values whose length stays fixed, since a change in position of an item will cause a change in state.

<h1>Shopping list</h1>
<ul>
	{#each items as item}
		<li>{item.name} x {item.qty}</li>
	{/each}
</ul>

An each block can also specify an index, equivalent to the second argument in an array.map(...) callback:

{#each items as item, i}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

Keyed each blocks

<!--- copy: false  --->
{#each expression as name (key)}...{/each}

<!--- copy: false  --->
{#each expression as name, index (key)}...{/each}

If a key expression is provided — which must uniquely identify each iterated item — Svelte will compare old and new reactive items having the same key to determine state changes, rather than comparing items at the same position in the iterated sequence. This is useful when the positions of items change, e.g. when modifying the length of an array. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.

{#each items as item (item.id)}
	<li>{item.name} x {item.qty}</li>
{/each}

<!-- or with additional index value -->
{#each items as item, i (item.id)}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

You can freely use destructuring and rest patterns in each blocks.

{#each items as { id, name, qty }, i (id)}
	<li>{i + 1}: {name} x {qty}</li>
{/each}

{#each objects as { id, ...rest }}
	<li><span>{id}</span><MyComponent {...rest} /></li>
{/each}

{#each items as [id, ...rest]}
	<li><span>{id}</span><MyComponent values={rest} /></li>
{/each}

Each blocks without an item

<!--- copy: false  --->
{#each expression}...{/each}

<!--- copy: false  --->
{#each expression, index}...{/each}

In case you just want to render something n times, you can omit the as part (demo):

<div class="chess-board">
	{#each { length: 8 }, rank}
		{#each { length: 8 }, file}
			<div class:black={(rank + file) % 2 === 1}></div>
		{/each}
	{/each}
</div>

Else blocks

<!--- copy: false  --->
{#each expression as name}...{:else}...{/each}

An each block can also have an {:else} clause, which is rendered if the list is empty.

{#each todos as todo}
	<p>{todo.text}</p>
{:else}
	<p>No tasks today!</p>
{/each}