← flaviocopes.com

How to simulate a for loop in Svelte templates

Published Aug 07 2020

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨

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}

I write books for developers 👇🏼