Svelte Tutorial for Beginners #6 - Loops

Key Takeaways

or rather than going so in this video what I'd like to do is talk about loops and we'd use loops in spelt if ever we wanted to cycle through some data like an array and output a bit of HTML template for each item in that array of data so the best way to learn is by example and you can see I've already cleared out all of the script and the HTML inside the main tag right here and I'm going to create a variable called people and set it equal to an array and inside that array I'm gonna paste in these three objects right here these have come from my Gib a repo over here woohoo so I've pasted those in and each object represents a single person so each object has a name the belt color property and age and an ID and we'll see why we have an ID later on the svelte kind of requires this when we're using loops so if we wanted to output a bit of template for each one of these items what are the options well we could manually do it I could say div and then inside there I could do an h4 and in curly braces I could say well I want the first item in the people erase or position zero and then when I output the name and then below that I could output the belt color by saying people zero and then we want the belt color property and then we could do exactly the same thing for the other two items in the array so this would be a one like so and this would be - oops - and - totally done all this wrong so 0 1 and 2 and that would grab this one first then this then this one and output each one so that would work but it's not the most effective way of working if we had 20 items in we'd be doing this 20 times if we had 100 a hundred times and we might not even know how much data is in the array it might come from a database we're not clear on how many there are so we wouldn't know how many to output so this is not the way we should be working instead we should use a loop so we can cycle through this data take each one of these one at a time and I'll put a bit of template for each one so the way we do that is by using curly braces then hash and then the each keyword so this is going to be similar to a for each loop in JavaScript so for each one of these things we're going to output some data right some templates so we say each and then the array name which is people and then us and you can call this what you want I'm going to call it person because it's the singular and this is how we refer to each individual item so at the end of that I'm going to say forward slash each like so and that closes the each block so this is basically it going to cycle through this people array and it's going to look at this one first and we can access that using the person object now because we're seeing we want to refer to each item as a person so we can output a bit of template for this person cycles through it the first time in person is this the second time person is this the third time person is this alright so now inside all we do is define the template we want to output for each person so I could say div and then in there and h4 and we want to output the person dot name and then below that we want to output maybe the age and the belt color so I can do a paragraph tag and I could say person dots age and then I'll say years old comma and then I'll do person dots belt color and I'll say belts at the end so it would be something like 25 years old and black belt okay so I am now going to save that and come over here and it works awesome so that was much simpler because now we're not output in this several times manually ourselves and also if we didn't know how many data items were in the array it wouldn't matter because it's just going to cycle through each one sequentially regardless of how many are in it okay now when we use in each loops like this we should also apply a unique key to each element inside our array and we pass that unique key property to the loop so I'm going to say right here in parentheses that we want the key property for each person to be the person dots ID so something unique to each object alright so this means that svelt can use that to keep track of which Dom element is connected to which item in the array so if I save this it's not going to look any different at the minute but what's felt is doing now is linking up each HTML bit of template to each section or piece of data in the array and it's forming that bond between the two so each div is now linked under the hood with a specific piece of data in the array so we're creating a link between the template parts and the array right so without that unique key it can't provide this link or create this link under the hood and you might run into trouble when manipulating data or later on so the effect of this might seem negligible now but it is a good habit to get into so that svelt can properly link our data with our Dom elements especially when it comes to manipulating the data or later on okay now there's one more thing I want to show you over here and that is if you wanted to add inside each block another keyword and it's going to be colon else and inside here I'm gonna do a paragraph and I'll say there no people to show so if this was ever empty at any point then it's obviously not going to output this template but if you don't want it to be blank instead it's going to show you this so if I save it and come over here at the minute it won't show it because we don't have an empty array but if I comment out all of this stuff right here and save it then we can see now it shows there are no people to show so that's how we use loops to output a bit of HTML template for each item in an array in the next video I'd like to show you how we can delete these items by clicking on them