Each blocks ({#each}) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to loop over the items array and display each item.

Svelte

<ul>
  {#each [1] as item}
    <li>{item}</li>
  {/each}
</ul>

Drag options to blanks, or click blank then click option'

Aitems

Bitem

Clist

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using the loop variable name instead of the array name.

Using a variable that does not exist.

The {#each} block loops over the array named items. You must put the array name after {#each.

2fill in blank

medium

Complete the code to include the index of each item in the loop.

Svelte

<ul>
  {#each items as item, [1]
    <li>{index}: {item}</li>
  {/each}
</ul>

Drag options to blanks, or click blank then click option'

Aindex

Bcount

Ckey

Dnum

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not the index.

Forgetting the comma between item and index.

The second variable after as item, is the index of the current item in the array. It is commonly named index.

3fill in blank

hard

Fix the error in the each block syntax to correctly loop over tasks.

Svelte

{#each tasks [1] task}
  <p>{task.name}</p>
{/each}

Drag options to blanks, or click blank then click option'

Ain

Bwith

Cof

Das

Attempts:

3 left

💡 Hint

Common Mistakes

Using JavaScript keywords like in or of instead of as.

Omitting the keyword entirely.

The correct syntax for Svelte each blocks is {#each array as item}. The keyword as is required.

4fill in blank

hard

Fill both blanks to loop over users and get both the user and their index.

Svelte

{#each [1] as [2], idx}
  <p>{idx + 1}. {user}</p>
{/each}

Drag options to blanks, or click blank then click option'

Ausers

Buser

CusersList

Dperson

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not match the block content.

Using a wrong array name.

The first blank is the array users. The second blank is the variable name for each user, user.

5fill in blank

hard

Fill all three blanks to create an each block that loops over products, gets each product, and its index.

Svelte

{#each [1] as [2], [3]
  <div>{index}: {product.name}</div>
{/each}

Drag options to blanks, or click blank then click option'

Aitems

Bproduct

Cindex

Dproducts

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the variable names.

Using a wrong array name.

The array is products. The item variable is product. The index variable is index.