Svelte provides an easy way to loop through the variable and display the data. There are multiple ways to use each block to your advantage and build awesome applications. Let’s look at some of the ways.
Each block with a simple object
We will start with the most basic usage. Consider having an array of objects and you want to display them in a list. You can start with this method.
<script>
let names = ['Name 1', 'Name 2', 'Name 3'];
</script>
<ul>
{#each names as name, index}
<li>{index} - {name}</li>
{/each}
</ul>
Each block will now use the names
variable to loop through and the name
is an alias for each item in the array. You can pass the second argument after the comma which will provide the index of the current iteration in the loop. Here we are passing the index
variable.
Each block with the keyed object
Each block allows adding a key for each of the rows to uniquely identify that particular row. This is really helpful when you are updating a particular item in the array. It is recommended to provide this key.
<script>
let names = [{id: 1, name: 'Name 1'},{id: 2, name: 'Name 2'},{id: 3, name: 'Name 3'}];
</script>
<ul>
{#each names as item, index (item.id)}
<li>{item.id} - {item.name}</li>
{/each}
</ul>
You can use any property which will uniquely identify that particular row. Here we are using the id
property in the array to identify the row.
Each block with object destructing
If you just want a few properties from the row item, you can make use of object destructing syntax. It allows you to pick a few properties from the overall item.
<script>
let names = [{id: 1, name: 'Name 1'},{id: 2, name: 'Name 2'},{id: 3, name: 'Name 3'}];
</script>
<ul>
{#each names as {id, name}, index (id)}
<li>{id} - {name}</li>
{/each}
</ul>
We are just picking the id
and name
from the item. You can then use those variables inside each block.
Each block with key-value objects
<script>
let name1 = {
name: 'Name 1',
age: 25,
gender: 'Male',
occupation: 'Software Developer'
}
</script>
<ul>
{#each Object.entries(name1) as [key, value], index (key)}
<li>{key} - {value}</li>
{/each}
</ul>
You can iterate through all the fields in the object and display them in the list. This will be useful when you are not sure of the structure of the object returned. This is possible using the Object.entries
method which will give a list of key-value pairs which we can iterate.
Each block with x number of times
If you just want to display a component a few times, you can use this method.
<ul>
{#each Array(5) as _, index (index)}
<li>Comment</li>
{/each}
</ul>
We are using the Array(length)
syntax to create a new array of 5 items that will be undefined
. Since we do not care about the value inside the array, we use _
which is a convention meaning that value is not important for our app.
Conclusion
Svelte provides a nice syntax that helps increase the productivity of the developers and keep things inside in the application. If you have any feedback or any question, feel free to join our discord
Discord - https://discord.gg/AUjrcK6eep
Top comments (0)