Introduction and intent
Hey what's happening guys? Welcome to your 12th Vue.js tutorial, and in this video I want to show you how we can loop through arrays and objects with a directive.
Preparing arrays in the Vue instance
Okay then. So far in this Vue instance we've been making data which is pretty simple like this: a property which is just a single value, a string. Now that's cool but I want to move on to some more complex types of data, in particular arrays. So I've got two properties set up here: characters and ninjas. They are both arrays. The first one is an array of strings, the second one is an array of objects. So I'm going to show you how we can output this data to the browser and we can cycle through this data in our templates using the directive v-for. So let's save this and move over to the index.html. So say we want to output every single element in that characters array, right? Yeah, we could use something like this: we could say characters then zero, then we could do characters and then one and, you know, go through each one until we've listed every single element in this array which is fine but A: what if we don't know how many items are in the array then we won't know where to go up to here and B: if there's a lot of items in the array then this is just a waste of space because we're just repeating ourselves over and over. So a better way to do this would be to use a directive called v-for which is going to loop through an array for us.
Basic v-for on an unordered list
So how do we do this? Well to demonstrate I'm just going to create a ul and then inside an li. Now the way I want to do this is to output a single character from this array, this top one, in each li, right, so there'll be a character name in each li going down. Now instead of writing four lis all I need to do is use a directive called v-for and set that equal to what I want to loop through. Now I want to loop through the characters, right, so what I need to say is character in characters. So this right here, this is the name of the data property here, and in each cycle round when we're looping through we're going to refer to a single character, right, so we can make this up — this could be x, this could be y — but basically this is a single item in this array and each time we loop through using this v-for that single item is going to be referenced using this character variable. Okay, so we're just saying character in characters. So now we can output this thing right here, this single character. So I'm going to copy that and I'm going to paste it in. So now if I save this and check it out in a browser we're going to see all of these characters listed right here and if we inspect you're going to see each one of these is going to be in an li tag. So what this has done is looped through our array right here and it's created an li tag for every single element in that array, and that's because we're using this v-for directive to cycle through that array and then we're outputting the item in that array each time we cycle through.
Iterating arrays of objects and outputting properties
Okay so let's do another simple example. This time I want to cycle through these things right here, so I'm going to do another ul and then inside this another li and like before we're going to say v-for to cycle through. This time we're going to say ninja in ninjas because ninjas is the name of this thing right here and then ninja is going to refer to the single item each time around as we go through the array. So this time we can't just output ninja because this is an object, right? Each item in this array right here is an object and what's going to happen if we output this to our browser? Well let's have a look. We get this which is not very nice. So what I want to do is get each property from this object right here and output each property. Now we know we've got a name property and we know we've got an age property so all I need to do really is say ninja.name and then I'm going to do a little dash and then I'll do ninja.age. Alright. So we're using this template syntax right here to output two separate variables: the name property on the ninja and the age property on the ninja because that's how we're storing it, name and age. So if I save this now let's check it out again. This time we get those variables output onto the screen a lot nicer.
Outputting the index and parentheses syntax
Another thing I'd like to show you is how we can output the index of this item and by index I mean the position in the array. So this has an index of zero, this an index of one, this an index of two, right, and then 0, 1, 2, 3. So how can we output that index to the browser? Well all we need to do right here is do our parenthesis around ninja and then next to ninja we can pass through the index. So now that's going to refer to whatever position this ninja is in the array. So I can output that as well by saying index and then I'm going to do a dot here and save that. That dot is just so it comes after the number, you don't need that. If we view this in a browser now we can see 0 1 2 and we can do the same for the top one right here. We could enclose this in parenthesis and add the index here and also here and if we view this in a browser this is going to do the same thing. Okay so that's how we output the index.
Now I want to show you one more thing, first in fact two more things. First of all, what if we don't want to output li tags? Well we can do this in whatever we want. If we want we could do a div tag and then we could say v-for is equal — and again I'm going to do the same thing as this, so I'm just going to copy and paste — and then inside this div say we want for example a h3 and that is going to output the index first of all and dots and then what we'll do is output the name as well, so we'll say ninja.name. Then underneath the h3 we might want to output the age so we'll do a p tag and we'll output ninja.age. Okay so this time around we're not using li tags, we're using a div tag and it's going to cycle through the div tags and create a new div with this kind of template inside it for each ninja. So if we save this now and check it out in a browser now we get something like this. And if we inspect this over here you can see there's a separate div for each different ninja which is okay. But this div right here in my opinion is just kind of extra markup that we don't really need. Yeah, we're using it to loop through these items but it doesn't need to be in the HTML. So what we can do is instead of using div, if we don't want this to be in the HTML and we just want it to be a series of h3s and ps, then all we need to do is change this to template and Vue.js is going to look at this and it's going to say, hey this is a template tag and it doesn't want me to output this tag to the browser. All it wants me to do is take the template inside this and output that to the browser. So we're still going to cycle through because we've got v-for, but all we're going to do is output what's inside to the browser. So if we save this now we still get the same kind of output but this time those div tags are not around so this is kind of clean markup.
Nested v-for: looping object key/value pairs
Okay so now I want to show you one more thing. We've looped through both of these arrays right but I want to show you how we can also loop through objects because in this array we have three objects right and each object has got two values, two different key and value pairs. So what if we want for each object to loop through every single key/value pair? So instead of saying for example where we said ninja.name and ninja.age what if we don't necessarily know the name of these properties and we just want to output each one to the browser without doing name or age? Well we can do that as well. So what I'm going to do is another template tag first of all and then inside this I'm going to do another v-for and this is going to say v-for equals ninja in ninjas. So first of all we're cycling through the array again just like we did over here but without the index, right, so we're cycling through this array and each one of these is going to refer to that single ninja. So each time around in here now we have access to that single ninja object. So what we want to do now is cycle through that single object, right, and we can use another v-for to do that. So I'm going to create a div right here and I'm going to say v-for is equal to and then this is going to be val and key and I'm going to explain this in a minute in ninja. Okay? So right now what we're doing is taking that single ninja object and we're cycling through it, so much like we cycled through the array this time because we have access to that single object in the array we're now cycling through that single object and what we're doing is we're getting the value and the key of each of those objects or properties rather in the object. So we're getting the value and the key each time around and we're cycling through each one of those. And now what we can do is output those separately without knowing the name of those keys, right? So I could say p and output the key and then hyphen and I'm also going to output the value. Okay so if I save that now check this out in a browser. Now we get the key and the value, the key and the value. Okay so this right here — all of this is one object and we've cycled through the keys and the values and we've output them in each individual object, each individual ninja. Okay and we've done that for all ninjas because we're cycling through each ninja in the array as well. Okay so that is how we cycle through data in Vue.js using v-for.
