This post is a continuation of the course on Svelte. we would recommend going through the rest of the posts in the order to get the maximum out of this course
Previous post - Svelte - If/ Else/ Else if Blocks
Loops are an essential part of programming which let’s use to automate a simple task many times. Svelte Each
block can be used to loop through the items in an array to perform some task. Usually, it is used to render a list of items/ display the same element multiple times.
Each block syntax is pretty simple and can be used to perform outstanding results. You can use the following syntax
{#each [array] as [array_item], [index]}
// Looping code here
{/each}
#each
represents the start of the loop[array]
represents the array item to loop over. This will contain all the items which we need to iterate.[array_item]
represents the single item in the array. This item will be automatically changed to the current item in the iteration. When the 1st iteration of the loop is taking place, this will contain the first item and when the 2nd iteration happens it will contain the 2nd item in the array.[index]
represent the current iteration index. Similar to the array_item
, the value will keep modified when there is a change in the iteration of the loopLet’s put the learning in action and build a nav bar using the Each block. We will have to define the items of the nav bar at the start and then loop through them using the Each block.
<script>
let menu_items = [{ name: 'Home', url: '/'}, {name: 'Contact', url: '/contact'}];
</script>
<nav>
{#each menu_items as menu_item}
<a href={menu_item.url}>{menu_item.name}</a>
{/each}
</nav>
<style>
nav {
display: flex;
justify-content: center;
gap: 20px;
}
</style>
Svelte Nav Bar - Each block REPL
Getting the index of each item will be helpful if you want to perform some modification to the array content inside the loop. Consider the example of adding a delete button inside the loop to remove an item.
<script>
let things = ["Buy Grocery", "Make Food", "Cleaning"];
const removeItem = (index) => {
if (index < things.length) {
things = [...things.slice(0, index), ...things.slice(index + 1)]
}
}
</script>
<ul>
{#each things as thing, index}
<li>
{index} - {thing}
<button on:click={() => removeItem(index)}>Done</button>
</li>
{/each}
</ul>
Svelte Each block with Index - REPL
To learn more about different ways to use Each block in Svelte, Check out 5 ways to perform Each block
Sriram is a content creator focused on providing quality content which provides value for the readers. He believe is constant learning and sharing those learning with the group. He is working as a lead developer and bulk of his experience is in working with multiple javascript frameworks such as Angular, React, Svelte. He is passionate about open source technologies and on his free time loves to develop games.
We will reach out when exciting new posts are available. We won’t send you spam. Unsubscribe at any time.