How to use Svelte Each Block to render arrays?

In this post, we will learn how to use the Svelte Each Block. It is a pretty common requirement to render lists on the UI. It could be a list of employees or products or anything else you can imagine.

In such a case, we often want to repeat a certain block multiple times. In other words, once for each element of the list. This list could be something we fetch from the database or generate dynamically.

If you are new to Svelte, you can start with our detailed post on Svelte Hello World example.

1 – The Svelte Each Block

To demonstrate the usage of each block, we will create a list of books and try to render them on the UI.

See below example:

<script>
    import Book from "./Book.svelte"

    let books = [{
        bookName: "Eye of the World",
        author: "Robert Jordan"
    },
    {
        bookName: "The Great Hunt",
        author: "Robert Jordan"
    },
    {
        bookName: "The Dragon Reborn",
        author: "Robert Jordan"
    }]
    
</script>

<h1>Welcome to the Fantasy Library</h1>
{#each books as book}
<Book 
    bookName = {book.bookName} 
    author = {book.author} 
/>
{/each}

The array books contain three different books. In the markup, we use #each to start the each block. As discussed in our previous post, # signifies that this is a multi-line statement.

The each block uses the books array and gives us access to an individual item in the array through the book variable. Then, we use the Book component and pass the individual book properties to the same. Below is the Book component for reference.

<script>
    export let bookName;
    export let author
</script>
<div>
    <span>Book Name: {bookName} // Author: {author}</span>
</div>

As you can see, this is an extremely simple component with hardly any markup or styling. Our goal is simply to display the book details. You can check out our detailed post on Svelte Nested Components in case you are interested to know about how components are created.

Lastly, we close the each block using /each.

2 – Each Block Index

Svelte each block also provides us access to some other useful properties such as the index.

See below example:

<h1>Welcome to the Fantasy Library</h1>
{#each books as book, idx}
<h3>{idx + 1}</h3>
<Book 
    bookName = {book.bookName} 
    author = {book.author} 
/>
{/each}

Here, we extract the array index for each item using the idx variable. Since the index starts from 0, we increment it by 1 before rendering.

Do note that the variable name idx is totally upto us. In other words, we can name it anything we want.

3 – Each Block with Else

Many times, we have a situation where we are waiting for the list data to be fetched from the backend server. Until the data is not fetched, we want to show some progress bar to the user or display some message.

In such a case, we can use the else block.

See below example:

<script>
    import Book from "./Book.svelte"

    let books = []
    
</script>

<h1>Welcome to the Fantasy Library</h1>
{#each books as book, idx}
<h3>{idx + 1}</h3>
<Book 
    bookName = {book.bookName} 
    author = {book.author} 
/>
{:else}
<h3>Fetching Data...</h3>
{/each}

In the above case, we will see the Fetching Data message since the books array is empty.

Conclusion

With this, we have successfully learnt how to use Svelte Each Block to render arrays or lists in our application.

In the next post, we will learn how to use Svelte Keyed Each Block.

If you have any queries or comments, please feel free to mention in the comments section below.