2.3 Looping Through Data

So to this point we've been able to display some very basic data to the end user using string interpolation. Now while that's interesting, it's gonna be a little limiting if we're only ever dealing with a single object here, or a single quiz or whatever you wanna call it. So in most instances, what we're gonna have to do is we're gonna have to deal with maybe a list of these things or a collection, or an array, if you will. So really what I wanna do here instead of returning a single object that I wanna display, I wanna make this a little bit more flexible and maybe return an object that has a collection of quizzes, or something to that effect. So let's go ahead and start to build that out a little bit. So let's create an array of quizzes, and then each quiz within there is going to have these properties. So lets just go ahead and grab this first one here, we'll cut that out and then within here I'll create a separate object and I will go ahead and paste that in, so let's go ahead and save that. Now by doing that, I have probably broken my application and as you can see I have. I do have a card here but there's no data in it. And then I also get some errors down here, so if you were to scroll to the top, property or method title is not defined as well as property or method description. Okay, well, that's a problem because I'm no longer dealing with a single object and at the root level having a title and description property. I know have a quizzes property, which is a collection of these things. So what I could do, just to get things back up and running, is I could say, well, I have access to quizzes, and it's an array, so I can use index 0 to get the first title. And then I could do the same thing down here for the description. So we'll just copy and paste it in there. Now if I save this and come back, my application is up and running again. Okay, not bad. But this is probably a bad idea, I really don't want to be doing this. What I'd like to do is I'd like to be able to loop through all of these quizzes and display them all to the end user. And that's exactly what we're going to do right now. So just as we were able to do string interpolation to display some properties or to display some text, we can do some other functionality using view to be able to loop through content and display everything as necessary. And the way that we do that is with a special attribute that we can apply to an element within HTML that is specific to view, that's going to allow us to execute a for loop. And the way that we do that is we're gonna come up to the element that we want to get looped through for all the objects in a collection. And in this case, I want to do that for this div right here. So this is the kind of the parent div that I want to repeat over and over again for all of the quizzes that show up in this list. All right, so that's how we're going to handle this. So I'm going to grab this property or this element here, and I'm going to apply a special attribute called v-for. So what this is, is a special attribute that is going to allow me to loop through a certain collection. Getting an instance of one of those objects in that collection every time through, and then do something with it. And it's going to repeat this block, this containing element every single time. Now the way to notice in most cases and not all, there are exceptions to know that if an element is specific to view, it's typically gonna have this v-. Now there are exceptions and there is some shorthand notations that we'll talk about later. But for the most part if you see v- something, then that's gonna be associated with view. So in order to use this I simply wanna say v-for and I want to say for each quiz, in quizzes I want to do something with this quiz now. Now that I've defined this quiz, I now have access to this within the scope of this particular element. So now I can take this quiz, I can copy it and I can refer to the quiz down here at the bottom. So let's go ahead and save that and run that through our interpolation. And if I were to come back over here you now see that I have chapter 1 and this is a sample description. Again, so now I'm looping through some data and I'm duplicating a div or an element, any element that I choose. As many number of times as there are objects in this collection, and I'm going to display it. Now there's only one object here and so that's why you are only seeing one. So let's go ahead and copy this guy. And we'll create a second one, so I will add to my collection here and I'll just paste this down here and I'll say this is chapter 2. And this is, how about, this is another sample description. Let's go ahead and save that. Come back over here and now I get two cards. So now you can see we're building a little bit more flexibility into our application, or at least into this component. Where I can now loop through this data without having to manually copy all of this stuff over and over again for every single object that I have in this collection.