#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Genres via the service
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Well, we've seen where we can search now but we want to get these genres also from the service, that's one of the next things we're going do
0:11
and notice I've cut a bunch out of the fake data so it'll be obvious when the real data comes in. Alright, so let's do that next
0:16
let's go over here and have another function load_all_genres. Really only going to call this once at the beginning, shouldn't need to
0:23
call it more than but we go and do this. Now you can imagine these are not terribly different. So I'm going to come over here and instead of calling
0:32
just this URL we're going to say base_url plus let's go look at the service, see what we get. For genres we just want /movies/genres/all.
0:42
So that's going to be our API and point and then the data that's coming back is just going to be JSON, list of genres.
0:51
So we'll just put genres like so. Now notice this is not called right let's call that, that's even something it can tell but that function
1:00
is not being used. So, how we're going to fix this? Well, down here is the app starts up we want a trigger, maybe the try one more function
1:07
because it's going to do two things. We'll have to call it in later or something like that. This is a function that's going to load
1:14
Starter Data so it's going to say this.load_all_genres. It's also going to say this.top_ten now top ten doesn't do anything yet
1:25
but you know, if we don't have our fake data we're going to have to pull up those movies. Okay, so let's just, we'll fix that in a minute.
1:32
We'll make the top ten work in a minute but now we need to say app dot in it like so. So, when we refresh this
1:40
here should go hit this, pull those things down and this is just going to show the fake data still but this should work.
1:47
Let's refresh it, It worked. How do I know? Because that little selection thing went down but look there's all of them How cool is that?
1:55
Now, we do need to do one other thing here we get this data here these are going to be genres let's say let genres equal that.
2:06
Remember before we had that fake data we had movies as no genre thing was top movies by genre, right? Now we're going to say nothing.
2:19
So what we need to do is we need to do that trick again of getting that into the front of our list. But now, and the way it's going to work is
2:25
just say genres.unshift. Yay, JavaScript! That, we're going to need to do that.no_genre. We also need to say we're going to set the selected genre
2:38
to be that so we'll say, that.selected genre is that.no_genre. Actually, maybe the order matters there. Okay, let's do it like that, try again.
2:49
Boom, look it's back! Top movies by genre and there we go so our genres are working coming off of the API. Top ten doesn't work yet be we have
2:58
searching, searching works, this works. Although we're not loading data we're getting at least from there. So the next two things we ought to handle is
3:04
what happens when I click drama and what happens when I click here. They're both super easy follow on's from what we just did.