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}
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025