2.3 Displaying Movie Posters

In our last lesson, we created this searchMovies function, which calls on our base URL and does a quick search for whatever keyword is passed in here. And so, we called on that function and passed in the string, Ghostbusters. And when we do that, you'll notice we're doing a console log in order to view that data in the console. And if we go down to our console, we can see this JavaScript object that's created here, and inside that object we have a perimeter called search. And if we expand that out, we can see that search perimeter here and if we expand that out then we can see all of our search results. So now that we have our search results, I'm gonna pull those on to the page so that we can view the movie posters for those search results. Now again, if we collapse all of this again, you'll notice that the actual data object that we're returning is a JavaScript object. And the search results themselves are just a parameter within that object, or a property within that object. And it's called search. So if we wanted to look at that specifically we could point to data.search. So before we do that, I'm going to click on Fork to create a new copy of this. You can find the starting URl in the course notes. And once we've got our new copy open, let's change this to data.Search with a capital S because that's what's in our search results here. And then we're going to save that and click on Run. Now I've got my settings set up so that it's not automatically running over and over again, it's only gonna run when I tell it to. So any time we need to refresh this over here, I'm hitting Run. So when we point to data.Search we no longer see that JavaScript object. Instead, we just see the array of search results and we can expand that out to see those search results. Well now, I want to use view to pull in the data from these search results and display them on the screen. So in our HTML, we have this movies-container div. This is gonna be the container for our new view object that we're going to create, and inside this container we're gonna display all of our search results. So let's say inside this div, I'm gonna go ahead and create a new element here. And I'm gonna call this element movies. Then we'll create our closing movies tag as well and this movies element is going to be a component within our view instance. Now, if you don't understand components in view, then you need to go back to the short course that I created on view components, and you need to watch that. Because it's very important to understand components before we can move forward with what we're doing here. Now there's more that we need to do to this element, but we'll do that later. For now, let's jump back into JavaScript, and let's create our view instance before this searchMovies function. So I'm gonna create a variable here, let's just call it app. You can call it whatever you want to. And I'm gonna set this equal to a new instance of view. And then we need parentheses here and curly brackets. And then inside the curly brackets for this view object our first property that we're always gonna enter in here is called el, e-l, which is short for element. And this is gonna be the name of the element that contains or that's going to contain this view instance. And remember we're using that movies-container div to do this. So we're gonna point to pound movies-container, because it is an ID, it's the ID of that container and that's our element. Then we need some data. Now we don't have our data initially when the page loads. We're not gonna have that data until we do a search for whatever movie we're searching for. But we can go ahead and create the object that's going to contain that data. So we're gonna point to our data object here. We need opening and closing curly brackets, and then I'm gonna create a array called movies, and you'll notice it's just an empty array for now. We need to declare that by putting opening and closing square brackets there. But right now just an empty array, because we don't actually have any data to show yet, but once we call this searchMovies function, we will have that data. Then we'll assign it to this movies array. So after our data object here, we're gonna put a comma and then we're gonna create our components. So all of our components are gonna be contained within this components property here. So we have components colon and then a set of curly brackets. And inside those curly brackets we can put a list of components. And we only have one component that we're dealing with right now. And remember, we called our custom element that we created, we called it movies. So we need to put the name of that element here inside quotations marks. So I've got my single quotes here. And inside those single quotes I'm gonna type movies. Because again that's the name of this component, colon space and then a set of curly brackets. So, inside this movies component, we need a few things. First of all we need properties, and these are the properties or parameters, they kind of act like parameters. We're gonna pass into our template. And we're gonna pass in all of our movie info, but they all come in the form of search results. And first of all our props need to be put inside in arrays, we have our square brackets here, and it's an array of strings. And these strings simply represent the name that we want to give to the data that's passed in. So I wanna give this a name inside quotation marks again of movieresult. And then each movie result that's passed into that array you'll notice will have access to the title of that movieresult. Or the year, or the IMDB ID, etc. So again, this is the data that's gonna be passed into our template. And then we need to create the template itself for our component. Now again, the template is going to be the HTML that replaces our custom movies element that we created a moment ago. So everything we put in this template is going to replace that. So for our template, I’m gonna put a couple of things and I’m gonna stretch this out all the way. I’m just going to put this all on one line to make it easier to read. And all these needs to be in a string. So we've got our quotation marks here, and I'm gonna create a div here with a class. And since I'm using single quotes on the outside of a template, I'm using double quote inside it, so that we don't break anything. But this is gonna have a class of img for image. And if you look in your CSS you will notice that there is some CSS for this particular class. And then we need some way to identify this particular movie that's being passed into this template. And this template that we're creating is gonna be created over and over again, once for each movie result that comes back. And so, not only do I want to put an image in here that is the poster of whatever movie we're looking at. But I also want to make sure we store the imdbID here, so that we have an easy way to click on that image and do a search for more information on that movie. So I'm gonna store this imdbID inside a custom data attribute called data-id. Now normally that would look like this, we would say data-id equals and then inside quotation marks we would put in whatever that data is. However, we need to bind this data to whatever data is being passed into our template. So the way we bind that is we could type v-bind:data-id, and then here we would put the name of the property that we're binding to it. So we're binding movieresult.imdb and then ID are both capitalized, you can see that in our search results down here in our console. So movieresult.imdbID and the short way of typing that out is just typing, :data-id equals etc, etc. So let's close off that div. We'll put our closing angle bracket there, and inside that div, we're gonna have an image. And we're gonna do the same thing for the source attribute for this image. We're going to bind it, so we're gonna do :src, which again, is the same thing as saying V bind :src. And we're gonna set this equal to inside double quotes here, "movieresult., and then property we're looking for here is called Poster. Again, we can see that down here in our console. Poster, with a capital P. And so, as you can see, it's very important to understand the structure of the data that's being retrieved. We need to understand that structure, so we'll know what properties to use when we're pulling that data in. So after our closing double quote here, we're gonna put our closing angle bracket for that image tag and then we'll put our closing div tag. So all we have is this div with a class of image, it has the imdbID as a data-id attribute and inside that div we have an image that's pointing to that movie poster. Now again, whenever we search for movies we're going to get multiple results back. So we're going to see a new copy of this template for each result that comes back to us. So let's go back to our HTML. Let's go ahead and pull this back over. And let's take another look at our movies element here. So these movies element means to loop. And the way we create a loop using view is v-for, we're gonna use the v-for attribute. And I'm gonna say, movie in movies. Now this movies variable here, this plural movies, this is coming from our JavaScript data for our view instance here. This is our data object, and we have this array called movies. Now eventually we're gonna have a bunch of movies stored in that array, and then we wanna cycle through all of those movies. So that's what we're looping through. We're looping through movies, and for each movies that's in that array of movies, we're going to display something. So this movie attribute here or this movie property or variable name here is a new variable that we can point to for each movie that comes in. And again, this movie, singular, is going to correspond to this movie result property that's being passed into our template. So we need to bind this movie result property to, This movie here. And the way we do that, is we're gonna create another attribute here :movieresult, which is the name of that parameter. And we're gonna set that parameter equal to this movie right here that's being passed in. So we're just going to copy and paste that there. So this right here is what binds the movie result property in our component to the movie that we're looping through in the array. And so for each movie that we loop through, this movies element here, since we're using the v-for loop, this movies element is going to be replaced by our template. So we've set up our template but now what we need to do is we need to take our search results that are pulled in right here, we can point to them with data.Search. We need to take those search results, put them in an array and then assign that array to this movies object inside of our data object for our view instance. So all the movies we just searched for, basically we need to stick them in this movies array here. So how do we do that? Well, let's come back down to our function here. But I'm gonna create an array here called movie array. And this is just a temporary array but for now it's empty. So we have our opening and closing square brackets. And then I'm gonna loop through our search results using a for loop. So we're gonna say for (var i = 0; and we're gonna loop through this as long as i is less than data.search, remember, data.search is the array of objects that comes back, .length. And then at the end of each loop, we're going to increment i by one. So i++, and then we need our curly brackets for our loop. So as we go through each of these items in the data search array, we want to make sure first of all that the result actually has a poster. And we see for all of these there is a poster, but from doing some experimenting I've noticed that sometimes the poster comes back with N/A, meaning there's no poster available. And I only want to view the results where a poster is available. That way, we don't have a broken image link there. So what I'm gonna do is I'm gonna do if data.search. And we're gonna look at whichever item we're looping through right now. So we're pointing to the i element of that search array. So whichever item we're currently looking at, we're gonna point to poster. Which again is that image, and we wanna make sure that it's not equal to N/A. In other words, we just wanna make sure that there is a poster available before we try to display that poster. So inside this if statement, I'm going to point to movie array and I'm going to push a new element into that movie array which is gonna be this element here data search i. So let's just copy that and put that here. And then a semicolon at the end of that statement. Then, after this for loop is done, after we've looped through all of the movies in the search result. I'm gonna go down to the next line here, and I'm gonna point to app, which is the name of our view instance. It's the variable that we created that holds our view instance. Dot and then the name of our movie array in the view instance is just called movies, so app.movies = movieArray;. So again, app.movies, if we scroll back up, is pointing to this movies array in our data object. And hopefully once we populate that array, then our templates will kick in and we'll see them show up over here on the right. So let's save our work, click Run and hopefully we'll see some movie posters. And sure enough, we do. And we can scroll through and see all of the different results we get when we search for Ghostbusters. So that's how you can take this data that we got in the last lesson, and pull it onto the stage and display it for your users. Thank you for watching, and I'll see you in the next lesson.