Using data in pages in Svelte

Introduction

Using data in pages lets you show information that can change or come from outside. It makes your page useful and interactive.

Showing a list of items like products or articles on a page.

Displaying user information after they log in.

Updating the page when a user types in a form.

Showing the current date and time that changes.

Loading data from a server to show on the page.

Syntax

Svelte

<script>
  let message = 'Hello, world!';
</script>

<p>{message}</p>

Use {} curly braces to insert data into HTML.

Declare variables inside the <script> tag to use them in the page.

Examples

Shows a greeting with a name stored in a variable.

Svelte

<script>
  let name = 'Alice';
</script>

<h1>Welcome, {name}!</h1>

Displays a number inside the page text.

Svelte

<script>
  let count = 5;
</script>

<p>You have {count} new messages.</p>

Shows a list of items using a loop.

Svelte

<script>
  let items = ['Apple', 'Banana', 'Cherry'];
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

Sample Program

This page shows user information by using data stored in an object.

Svelte

<script>
  let user = {
    name: 'Sam',
    age: 30
  };
</script>

<main>
  <h2>User Info</h2>
  <p>Name: {user.name}</p>
  <p>Age: {user.age}</p>
</main>

Important Notes

Data inside <script> is reactive. Changing variables updates the page automatically.

Use {#each} blocks to loop over arrays and show lists.

Keep data simple and clear for easy updates and maintenance.

Summary

Use variables inside <script> to hold data.

Insert data into HTML with curly braces {}.

Use loops like {#each} to show lists dynamically.

Practice

1. In Svelte, how do you display a variable's value inside the HTML of a page?

easy

A. Use parentheses like (variable) inside the HTML.

B. Use curly braces like {variable} inside the HTML.

C. Use angle brackets like <variable> inside the HTML.

D. Use quotes like "variable" inside the HTML.

Solution

1. Step 1: Understand Svelte's data binding syntax

   Svelte uses curly braces {} to insert JavaScript expressions or variables into HTML.

2. Step 2: Identify correct syntax for variable display

   Using {variable} inside HTML shows the variable's value dynamically.

3. Final Answer:

   Use curly braces like {variable} inside the HTML. -> Option B

4. Quick Check:

   Display variable = {variable} [OK]

Hint: Remember: curly braces show variables in HTML [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Trying to use angle brackets for variables
• Putting variable names inside quotes

2. Which of the following is the correct way to declare a variable in a Svelte page's <script> block?

easy

A. const name 'Svelte';

B. var name = 'Svelte';

C. let name = 'Svelte';

D. name = 'Svelte';

Solution

1. Step 1: Recall JavaScript variable declaration in Svelte

   Svelte uses standard JavaScript inside <script>, so let is the preferred way to declare variables that can change.

2. Step 2: Check syntax correctness

   let name = 'Svelte'; correctly declares a variable with a string value.

3. Final Answer:

   let name = 'Svelte'; -> Option C

4. Quick Check:

   Variable declaration = let [OK]

Hint: Use 'let' for variables inside <script> [OK]

Common Mistakes:

• Missing '=' sign in declaration
• Using 'var' which is outdated
• Not declaring variable with let/const

3. Given this Svelte code snippet, what will be rendered on the page?

<script>
  let fruits = ['Apple', 'Banana', 'Cherry'];
</script>

<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

medium

A. AppleBananaCherry

B. fruits

C. Apple, Banana, Cherry (plain text, no list)

D. Syntax error, nothing renders

Solution

1. Step 1: Understand the {#each} block

   The {#each} block loops over the array fruits and creates an <li> for each item.

2. Step 2: Check the output structure

   Each fruit name is inserted inside <li>, so the output is a list with three items.

3. Final Answer:

   <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul> -> Option A

4. Quick Check:

   Loop over fruits = list items [OK]

Hint: {#each} creates list items for array elements [OK]

Common Mistakes:

• Expecting plain text instead of list
• Misunderstanding {#each} syntax
• Thinking it outputs variable name instead of values

4. What is wrong with this Svelte code snippet?

<script>
  let count = 0
</script>

<button on:click={count++}>Click me</button>
<p>Clicked {count} times</p>

medium

A. The variable count should be declared with const, not let.

B. The event handler syntax is incorrect; it should be a function.

C. The <p> tag cannot use curly braces for variables.

D. There is no problem; the code works fine.

Solution

1. Step 1: Check event handler syntax

   In Svelte, the expression count++ inside on:click is valid and works as an event handler that increments count.

2. Step 2: Confirm no syntax errors

   The code correctly updates count and displays the updated value.

3. Final Answer:

   There is no problem; the code works fine. -> Option D

4. Quick Check:

   Event handler with expression increment works [OK]

Hint: Direct expressions like count++ work as event handlers in Svelte [OK]

Common Mistakes:

• Writing expressions directly in event handlers is invalid
• Using const for variables that change
• Thinking curly braces can't be used in HTML

5. You want to display a list of users with their names and ages on a Svelte page. The data is:

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Carol', age: 35 }
];

Which code snippet correctly shows each user's name and age inside a <div> using {#each}?

hard

A. {#each users as user, index} <div>User {index}: {user.name} ({user.age})</div>{/each}

B. {#each users} <div>{name} is {age} years old</div>{/each}

C. {#each users as user} <div>{name} is {age} years old</div>{/each}

D. {#each users as user} <div>{user} is {age} years old</div>{/each}

Solution

1. Step 1: Understand {#each} syntax with index

   The syntax {#each users as user, index} correctly loops over users and provides both user object and index.

2. Step 2: Check variable usage inside loop

   Inside the loop, {user.name} and {user.age} correctly access properties. Including index shows user number.

3. Final Answer:

   {#each users as user, index} <div>User {index}: {user.name} ({user.age})</div> {/each} -> Option A

4. Quick Check:

   Loop with index and user properties = {#each users as user, index}
<div>User {index}: {user.name} ({user.age})</div>
{/each} [OK]

Hint: Use 'as item, index' to get position and data in {#each} [OK]

Common Mistakes:

• Omitting 'as' keyword in {#each}
• Trying to access properties without user prefix
• Using undefined variables like 'age' alone