In Svelte when we run each loop we generally do it over an array of items. So, each iteration will provide single item. But there might be situations when we wish to run the loop x amount of times without any array. For such cases we can create a temporary array and loop over it. Check this code –

<p>This will list 3 items -</p>
{#each Array(3) as _, i}
  <p>Item {i+1}</p>
{/each}

Let’s understand this code. Here we declared a temporary array with 3 items, Array(3). This is an uninitialized array with 3 undefined items but since we do not need these items so we don’t care about them. We just need to run the loop 3 times. To denote a single item, we are using _. We always use this character to indicate that we are using it to fulfill the conditions but we have no intention to use them for any computation or anything.

Next we used i after a comma. In Svelte, this indicates index and it starts from 0.

Another way of doing it is by using length property. Check this out –

<p>This will list 5 items. Using length property -</p>
{#each {length: 5} as _, i}
  <p>Item {i+1}</p>
{/each}

Β Β Β Β Tweet this to help others

Live Demo

Comments

About the Author

akamit

I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

View All Articles