Skip to content

Svelte templates: loops

Learn how to work with loops in Svelte templates

In Svelte templates you can create a loop using the {#each}{/each} syntax:

<script>
let goodDogs = ['Roger', 'Syd']
</script>

{#each goodDogs as goodDog}
	<li>{goodDog}</li>
{/each}

If you are familiar with other frameworks that use templates, it’s a very similar syntax.

You can get the index of the iteration using:

<script>
let goodDogs = ['Roger', 'Syd']
</script>

{#each goodDogs as goodDog, index}
	<li>{index}: {goodDog}</li>
{/each}

(indexes start at 0)

When dynamically editing the lists removing and adding elements, you should always pass an identifier in lists, to prevent issues.

You do so using this syntax:

<script>
let goodDogs = ['Roger', 'Syd']
</script>

{#each goodDogs as goodDog (goodDog)}
	<li>{goodDog}</li>
{/each}

<!-- with the index -->
{#each goodDogs as goodDog, index (goodDog)}
	<li>{goodDog}</li>
{/each}

You can pass an object, too, but if your list has a unique identifier for each element, it’s best to use it:

<script>
let goodDogs = [
  { id: 1, name: 'Roger'},
  { id: 2, name: 'Syd'}
]
</script>

{#each goodDogs as goodDog (goodDog.id)}
	<li>{goodDog.name}</li>
{/each}

<!-- with the index -->
{#each goodDogs as goodDog, index (goodDog.id)}
	<li>{goodDog.name}</li>
{/each}
β†’ Download my free Svelte Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about svelte: