How to simulate a for loop in Svelte templates
Svelte templates offer us the fantastic each block that lets us iterate on an array, or anything that is iterable:
<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog}
<li>{goodDog}</li>
{/each}
But what if you want to repeat a block for a few times, based on a variable? Let’s say we have the rows
variable that holds a number, and we want to use that as the loop variable.
We can do what we need by creating an array, using the Array(n)
syntax. This will create an array, initializing it with n
items:
{#each Array(rows) as _, row}
{row}
{/each}
→ Get my Svelte Handbook
I wrote 21 books to help you become a better developer:
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook
- Svelte Handbook
- CSS Handbook
- Node.js Handbook
- Vue Handbook