{#each ...}

{#each expression as name}...{/each}

{#each expression as name, index}...{/each}

Vous pouvez itérer sur des valeurs en utilisant un bloc #each. Les valeurs en questions peuvent être des tableaux, des objets similaires à des tableaux (c-à-d tout ce qui possède une propriété length), ou des itérables comme Map et Set — autrement dit, tout ce qui peut être utilisé avec Array.from.

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

Un bloc #each peut également préciser un index, correspondant au deuxième argument d’un callback array.map(...).

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

Les blocs each à clé

{#each expression as name (key)}...{/each}

{#each expression as name, index (key)}...{/each}

Si une expression key est fournie — qui se doit d’identifier de manière unique chaque élément de la liste — Svelte va s’en servir pour remplacer finement les éléments de la liste lorsque celle-ci change, plutôt que d’ajouter ou supprimer les éléments à la fin. La clé (key) peut être n’importe quel objet, mais les chaînes de caractères et les nombres sont recommandés car il permettent à l’identité de persister lorsque les objets eux-mêmes changent.

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

<!-- ou avec la valeur d'index additionnelle -->
{#each items as item, i (item.id)}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

Vous pouvez déstructurer librement ou utiliser comme bon vous semble le paramètre de reste dans les blocs #each.

{#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}

Blocs each sans élément

{#each expression}...{/each}

{#each expression, index}...{/each}

Dans le cas où vous souhaitez uniquement afficher quelque chose n fois, vous pouvez omettre le as (demo):

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

Blocs else

{#each expression as name}...{:else}...{/each}

Un bloc #each peut également avoir une clause {:else}, qui sera affichée si la liste est vide.

{#each todos as todo}
	<p>{todo.text}</p>
{:else}
	<p>Rien à faire aujourd'hui !</p>
{/each}