5 ways to perform for loop in Svelte (Each block)
Tags: svelte, beginners
Published: 2022-02-08 12:56:43

---
title: 5 ways to perform for loop in Svelte (Each block)
published: true
date: 
tags: svelte, beginners
canonical_url: https://eternaldev.com/blog/5-ways-to-perform-for-loop-in-svelte-each-block
cover_image: https://www.eternaldev.com/static/b5504513fd27096f299631515cde1dac/aa1b3/svelteforloopposter.webp
---

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.

```js
<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.

[![BasicForLoop.png](https://eternaldev.com/static/9292cb618d2f0c7da86d45471d9c9e8b/b53cf/basicforloop.png "BasicForLoop.png")](/static/9292cb618d2f0c7da86d45471d9c9e8b/b53cf/basicforloop.png)

## 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.

```js
<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.

```js
<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

```js
<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.

[![ObjectBlockForLoop.png](https://eternaldev.com/static/169d23f8642b84410ce32b3f0e24f781/1cfa9/objectblockforloop.png "ObjectBlockForLoop.png")](/static/169d23f8642b84410ce32b3f0e24f781/1cfa9/objectblockforloop.png)

## Each block with x number of times

If you just want to display a component a few times, you can use this method.

```js
<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](https://discord.gg/AUjrcK6eep)