Svelte 3 - How to loop each block X amount of times

Question

I'm hoping to find a way to iterate over an #each block a set amount of times in Svelte 3. In Vue I would do something like this:

<li v-for="i in 3"><!-- somecontent --></li>

But as I understand Svelte handles loops much differently using the .length property of the array being #eached. Is there some way to pull off something like this in Svelte?

{#each 3 as i}
  <li><!-- somecontent --></li>
{/if}

score 131 · Answer 1 · answered Apr 09 '20 at 11:51

131

An #each tag can loop anything with a length property, so:

{#each {length: 3} as _, i}
    <li>{i + 1}</li>
{/each}

will also work, if you prefer.

answered Apr 09 '20 at 11:51

Antony Jones

2,387
1
15
18

10

This answer better suits my needs because for a long iteration it is better not to create a looooong array I think. – Mert Gülsoy Nov 22 '21 at 07:18
1

Agreed, much better solution IMHO too – Olivier Refalo Apr 03 '22 at 09:42
1

Docs: https://svelte.dev/docs#template-syntax-each "You can use each blocks to iterate over any array or array-like value — that is, any object with a length property." – Robert Oct 05 '22 at 07:36

score 113 · Accepted Answer · answered Oct 03 '19 at 07:18

113

You can use {#each ...}, like:

{#each Array(3) as _, i}
    <li>{i + 1}</li>
{/each}

answered Oct 03 '19 at 07:18

CD..

72,281
25
154
163

1

Is there a way to have this #each block re-render anytime the number variable changes (from 3 to 5 for example?). I'd like to render a certain number of form items based on previous user input. Ex: How many cars do you have? --> Number of Text Inputs created for each Car Make/Model, for example. – Doomd Jan 17 '20 at 02:02
1

@Doomd: yes, see an example: https://svelte.dev/repl/fef2db8c70064c49913a6608ebf633b9?version=3.18.2 – CD.. Feb 20 '20 at 19:32
1

If you're going to do that - please key it @doomd so that Svelte can keep track of additions/removals: {#each x as _, i (x.id)} or similar. – Antony Jones Jul 07 '21 at 09:39

score 1 · Answer 3 · answered Dec 18 '21 at 15:13

1

i Use like this for travelling from a to b in Svelte

{#each Array.from(Array(b+1).keys()).slice(a) as i }
    <h1>{i}</h1>                    
{/each}

example (1 to 100):

{#each Array.from(Array(100+1).keys()).slice(1) as i }
    <h1>{i}</h1>                    
{/each}

answered Dec 18 '21 at 15:13

sk shahriar ahmed raka

815
1
10
29

2

Very cool, not as useful for 1-X since you can use one of the other simpler approaches for that. But this has some interesting possibilities for pagination https://svelte.dev/repl/509ac9d542644544a282966aef6879e1?version=3.44.3 – JHeth Dec 18 '21 at 20:52

score 1 · Answer 4 · answered May 26 '22 at 14:30

You can use clean variable from the script section (mmm... for a pagination):

// script
export let numOfPages = 10
const pagesArray = Array.from({length: numOfPages}, (x, i) => i+1) // [1,2,3,4,5,6,7,8,9,10]

// template
{#each pagesArray as page}
    <li>{page}</li>
{/each}

Svelte 3 - How to loop each block X amount of times

4 Answers4

Linked

Related