Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Loop over and render a list of data using an `each` block in Svelte 3

    Tomasz ŁakomyTomasz Łakomy
    sveltesvelte

    Quite often we need to be able to loop over and render a list of data that (for example) is returned from the backend.

    In this lesson we are going to learn how to use each block from Svelte to iterate over a list of data and render a list of European cities. We're also going to learn how to get the current index while iterating over a list, as well as how to destructure a currently iterated over element of the array.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 0:00 We have a list of cities that we would like to render over here. To do that, create an each block. We're going to iterate over cities and as a city. Let me just go ahead and close the block, as well.

    0:12 Inside of this each block, we're going to render a list element with the city.name. This is going to render all the free cities that we have defined over here.

    0:23 If we would like to use the index, each block gets the index as its second argument. I can do index. I can go ahead and render the index like this. Index, save, refresh. We can see the index over here. Let me add plus one to the index. There you go.

    0:40 We don't have to use the city object because right now each city has an ID and a name. If you wanted to, we can destructure those properties from the city object like this. ID, name. Let me factor that. We're going to use ID equal ID, like this.

    0:59 If we decide to add another city, let me create a custom ID. We're going to have Lisbon. After I save this, it's going to be automatically applied because each block is going to iterate over all cities. We're going to render as many cities as we have in the cities array.

    Discuss

    Discuss