#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Top 10 movies from API

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Next, we want to make sure that we're getting the top ten when we click this button but more importantly almost is when the app loads
0:07 we want this to show the current top ten movies right away with no interaction whatsoever. So how are we going to make that happen?
0:13 It turns out, we've basically already written that. Oh, and notice, I've deleted a bunch of the fake data
0:19 so it's not the same as what we'll get from the service that way you can tell when it's working. So let's go over here
0:24 now remember we already wrote this load_movies thing and we said, well the way we search is we get the text and we set this url.
0:31 Same over here, so we're going to say it's going to be even simpler, we're going to just say this.load_movies, url is base_url plus
0:39 let's just go see what it is it is movies/top. That's it. movies/top, well we've now implemented get the top ten. How cool is that?
0:50 Isn't it a good idea to have that as a separate function? Cuz we're going to use it down here as well. So let's go ahead and see if this is working.
0:55 Refresh, we should get the top ten data right here. Boom, look at that. Turn, Inferno, Shawshank Redemption, and so on.
1:02 Now, one thing, if you notice there's like a little flicker where Shawshank and then it goes away
1:06 and the reason is up here we have the movies set already we can set that to nothing. In the beginning it probably should do that the same for that.
1:13 So in this sense, we're no longer working with the fake data at all. Let's try it again. Here we go, we got our data.
1:20 One more refresh, you can kind of see the little curly braces something I don't love about these frameworks but it is what it is.
1:25 Cool, it looks like it's working. So now, if I search for test and then I click top ten, it's going back.
1:31 One quick little caveat here is when I say drama and I click top ten. Get this to come up again I click on this, you really want that to reset.
1:41 So let's take care of that problem real quick. So we're going to say this dot selected genre is no genre and same thing there.
1:50 Actually, and we do it right away. See if I got that right. Okay, so we go down here hit top ten, goes back
1:59 don't know why Web Soren thinks there's an error cuz it looks to me like it's working. If I have this selected on family, then I say test
2:05 it goes back to unselected. Beautiful. Alright, the last thing to do is just make this work and I think our app is totally done.

Talk Python's Mastodon Michael Kennedy's Mastodon