Svelte Tutorial - 10 - List Rendering

Summary

This video script teaches how to display lists in web applications using Svelte's 'each' block. It demonstrates iterating over arrays of strings and objects to render HTML elements dynamically. The script covers basic syntax, using aliases for current items, and optionally displaying indices. It also touches on iterating over arrays of objects, accessing properties like first and last names, and hints at the next topic: using keys for lists in Svelte.

Takeaways

• 😀 Building web applications often requires displaying lists of items, such as names, products, or courses.
• 🔄 In Svelte, the 'each' block is used to repeat HTML for each item in a list.
• 📝 The syntax for an 'each' block involves using curly braces, a hash symbol, and the block name, followed by an alias for the current item.
• 💡 To display a list of names, define an array in the script section and use the 'each' block to iterate over it, binding each name to the HTML.
• 🔑 The 'each' block syntax includes an alias for the current item and optionally the index, which can be used for additional context.
• 🌐 When rendering a list, the 'each' block will iterate as many times as there are items in the array, binding the current item to the HTML each time.
• 📑 If inspecting the rendered HTML, you'll see the element repeated for each item in the array, with the inner text reflecting the current item.
• 🔢 For lists with an index, the index is provided by Svelte and can be displayed alongside the item.
• 🏷 Iterating over an array of objects is similar, but you access properties like 'first' and 'last' names using dot notation on the alias.
• 🔑 The 'each' block can also include a 'key' expression for more efficient re-rendering of lists with dynamic content.

Q & A

What is the purpose of using the 'each' block in Svelte?

The 'each' block in Svelte is used to iterate over a list of items, such as an array, and repeat a block of HTML for each item in the list.

How do you define an array of strings in Svelte's script section?

You define an array of strings in Svelte's script section by using the `const` keyword followed by the array name and its values enclosed in square brackets, e.g., `const names = ['Bruce', 'Clark', 'Diana'];`.

What is the syntax for starting an 'each' block in Svelte?

The syntax for starting an 'each' block in Svelte is `{#each arrayName as alias}` where `arrayName` is the name of the array you want to iterate over and `alias` is the variable to refer to the current item in the loop.

How do you end an 'each' block in Svelte?

An 'each' block in Svelte is ended with `{/each}` followed by the name of the block if necessary.

What does the 'as' keyword do in the 'each' block syntax?

The 'as' keyword in the 'each' block syntax is used to create an alias for the current item in the array during each iteration of the loop.

How can you display the items of an array in the UI using Svelte?

You can display the items of an array in the UI by binding the alias to the HTML elements within the 'each' block, allowing the same HTML structure to be repeated for each item.

Can you access the index of the current item in an 'each' block iteration?

Yes, in Svelte, you can access the index of the current item by using the syntax `{#each arrayName as item, index}`.

What happens if you want to iterate over an array of objects in Svelte?

When iterating over an array of objects, you can access the properties of each object using the alias and the property names, e.g., `{#each fullNames as name (index)}` where `name.first` and `name.last` can be used to access the first name and last name properties.

How can you display the index of items in an 'each' block iteration?

You can display the index of items in an 'each' block iteration by binding the index to an HTML element within the 'each' block, e.g., `{#each names as name (index)}` and then using `{index + 1}` to display the index starting from 1.

What is the key expression in the 'each' block, and what is its purpose?

The key expression in the 'each' block is used to provide a unique identifier for each item in the array, which helps Svelte efficiently update the DOM when the list changes. It is mentioned as a topic for the next video in the script.

Outlines

00:00

📝 Using the 'each' Block in Svelt for Lists

This paragraph explains how to use the 'each' block in Svelt to render lists of items. It begins with a general introduction to the common need for displaying lists in web applications and then provides a step-by-step guide on how to implement the 'each' block. The example given involves creating a constant 'names' which is an array of strings, and the goal is to display this list in the UI. The 'each' block syntax is introduced, including how to iterate over the 'names' array with 'names as name', and how to bind the current item to HTML using curly braces. The paragraph also touches on how to display the index of the current item in the list and how to iterate over an array of objects, accessing both the first and last names.

05:00

🔑 Understanding the Key Expression in Svelt's 'each' Block

Building upon the previous paragraph, this section delves into the advanced usage of the 'each' block, specifically mentioning the key expression which can be provided for an 'each' block. The paragraph starts by summarizing the understanding of the 'each' block and its application in rendering lists of elements. It then introduces the concept of the key expression, which is a missing piece for a complete understanding of the 'each' block functionality. Although the key expression is not explained in detail within this paragraph, it sets the stage for further exploration in the subsequent video, promising to provide more insights into keys and lists in Svelt.

Keywords

💡Web Applications

Web applications are software programs that run on web browsers and provide interactive user experiences over the internet. In the video, web applications are the context for discussing how to display lists of items such as names, products, or courses, emphasizing their importance in modern software development.

💡List

A list in the context of the video refers to a collection of items that are displayed sequentially. Lists are a common UI element in web applications, and the script discusses how to dynamically generate lists using Svelte's 'each' block.

💡Svelte

Svelte is a modern front-end framework for building web applications. It is known for its efficient reactivity system and component-based architecture. The video's main theme revolves around using Svelte's features to render lists.

💡each block

The 'each' block in Svelte is a syntax construct used for iterating over arrays or objects. The video provides an example of how to use the 'each' block to repeat HTML elements for each item in a list, demonstrating its role in list rendering.

💡HTML

HTML, or HyperText Markup Language, is the standard language for creating web pages and web applications. The script mentions HTML in the context of binding data to elements like 'hsu' (likely a typo for 'h2') within the 'each' block to display lists.

💡UI

UI stands for User Interface, which is the space where interactions between users and a program occur. The video's aim is to display lists in the UI using Svelte's 'each' block, highlighting the importance of UI design in web development.

💡Array

An array is a data structure that holds a collection of items. In the video, arrays are used to store lists of names or objects representing full names, which are then iterated over using Svelte's 'each' block to display in the UI.

💡Alias

In the context of the 'each' block, an alias is a temporary name used to refer to the current item in the loop. The video explains using 'name' as an alias to bind data to HTML elements for each iteration.

💡Index

The index is the position of an item in an array. The video mentions that Svelte provides the index within the 'each' block, allowing developers to display additional information like the position of each item in the list.

💡Object

An object in programming is a data structure that holds properties, which are typically key-value pairs. The video includes an example of iterating over an array of objects, each containing a 'first' and 'last' name, to demonstrate more complex list rendering.

💡Key Expression

While not fully explained in the provided script, a key expression in Svelte's 'each' block is used to provide a unique identifier for list items. It helps Svelte efficiently update the DOM when items in the list change. The video mentions it as a topic for a future discussion.

Highlights

Building web applications often requires displaying lists of items such as names, products, or courses.

In Svelte, the 'each' block is used to repeat HTML for each item in a list.

The 'each' block syntax is introduced with a hash symbol and the keyword 'each', followed by the data and alias.

An example demonstrates using the 'each' block with an array of strings for names.

The 'each' block iterates over the array, binding each item to the HTML.

Each iteration of the 'each' block creates a new instance of the bound HTML element.

The index of the current item can be accessed within the 'each' block for additional rendering needs.

An example shows rendering the index alongside names for a list.

Iterating over an array of objects is also possible with the 'each' block.

Objects in the array can be aliased and their properties accessed using dot notation.

A demonstration of rendering a list of full names with first and last names from an array of objects.

The 'each' block can also render additional information like index numbers for lists.

Svelte's reactivity ensures that changes in the data array are reflected in the UI.

The 'each' block is a powerful feature for creating dynamic lists in Svelte applications.

Understanding the 'each' block is crucial for effective list rendering in Svelte.

The next video will cover the 'key' expression for the 'each' block, enhancing list rendering.

Transcripts

when you build web applications

a common scenario is to display a list

of items

for example a list of names a list of

products

a list of courses and so on

so what we want is to repeat some html

for each item in the list in swelt

we can achieve that using the each block

let's understand the syntax with an

example

in the script section i'm going to

define a constant

called names which is an array of three

strings

bruce clarke and

diana our aim is to

display this list of names in the ui

for which we need to use the each block

if you can recollect from the previous

video you know that we use

curly braces to represent a block in the

markup

so within the main tag i'm going to add

a pair of curly braces

we represent the starting of a block

with the hash

symbol and this block is the each block

we end this block with curly braces a

forward slash

and the name of the block again

now we need a way to get hold of each

name

in the names array and the syntax for

that

is names as

name and this is swelt specific syntax

so let's understand what is happening

here

in each block names is the data

defined in the script section and name

is simply an alias to refer to the

current item

in the loop since we have three names

the each block basically iterates three

times

with name referring to each of the names

this name is what we bind to the html

using

curly braces so within the each block

add an hsu tag we are going to bind

text name

so first iteration name is equal to the

string

bruce second iteration name is equal to

clark

and third iteration name is equal to

diana

if we save the file and take a look at

the browser

we see the names being displayed

if you inspect element you can see that

the h2 tag

is repeated three times and the inner

text

is bruce clark and diana

so the h2 element has repeated itself

for each

name in the names array

sometimes you might also want to get

hold of the index

when rendering a list for that swelt

provides the index

in the each block which you can use if

required

so instead of just name we get hold

of name comma index

then while binding we can also bind

the index

index plus one

if we take a look at the browser we can

see

one two three next to the names

index starts at zero and hence index

plus

1 will represent 1 2 and 3.

now a small variation of this is

iterating over

an array of objects let's quickly take a

look at an example

going to create a new constant called

full names and this is going to be equal

to

an array of objects

so we have first name and last name

bruce wayne clark kent and princess

diana

now the aim is to display the list of

full names

in the ui if you have understood the

first example

this should be fairly straightforward to

understand

within the main tag at the top i'm going

to add

another each block so hashtag

or hash symbol followed by the keyword

each we also need to close

the each block using the forward slash

now for the iteration we are iterating

over

full names and we are going to alias

each object as name

we can also get hold of the index

within the each block i'm going to add

an h2 tag

and we can render index plus one

but this time while rendering the first

and last names

we need to access name dot first

and name dot last

name here refers to each object in the

iteration

if we now save the file and head back to

the browser

we should be able to see bruce wayne

clark kent

and princess diana and of course the

numbers are also displayed

all right you should now have a good

understanding of

the each block and its usage to render a

list of

elements in swell but there is still a

missing piece

which is the key expression that can be

provided

for an each block let's understand

more about keys and lists in the next

video