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

5

87

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}
Cabinet answered 3/10, 2019 at 6:41 Comment(0)
P
179

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.

Perspiration answered 9/4, 2020 at 11:51 Comment(4)
This answer better suits my needs because for a long iteration it is better not to create a looooong array I think.Pustulant
Agreed, much better solution IMHO tooShoshanashoshanna
Docs: 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."Cholecystotomy
An array with length = 10000 is just an object with { length: 10000 } and a few extra methods. There is, afaik, no substantial overhead between writing Array(10000) and { length: 10000 }Tunable
B
128

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

{#each Array(3) as _, i}
    <li>{i + 1}</li>
{/each}
Boult answered 3/10, 2019 at 7:18 Comment(3)
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.Chuvash
@Doomd: yes, see an example: svelte.dev/repl/fef2db8c70064c49913a6608ebf633b9?version=3.18.2Boult
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.Perspiration
R
2

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}
Recreation answered 18/12, 2021 at 15:13 Comment(1)
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 svelte.dev/repl/509ac9d542644544a282966aef6879e1?version=3.44.3Cabinet
E
1

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}
Erminois answered 26/5, 2022 at 14:30 Comment(0)
S
1

You can also do it with helper:

/* code */
export function range(from, to) {
    const result = [];
    let i = from;

    while (i <= to) {
        result.push(i);
        i += 1;
    }

    return result;
}
<!-- template -->
{#each range(1, 3) as i}
    <li><!-- --></li>
{/each}
Self answered 26/1 at 23:54 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.