#100DaysOfWeb in Python Transcripts
Chapter: Days 17-20: Calling APIs in Flask
Lecture: Returning the data to the Pokemon Template
0:00 Before we get too ahead of ourselves
0:02 we need to actually test everything we've done.
0:04 And if you've tested exactly what I've typed in
0:08 you probably would have found a few errors.
0:09 So I hope you resolved those before watching this video.
0:14 If not, let's take a look at them.
0:16 What I've actually done here
0:19 is in routes.py
0:21 there are a couple of little issues here.
0:25 One, I had failed to
0:27 title this function correctly.
0:29 I called it get Pokecolor
0:30 and it's actually get Pokecolors
0:32 because that's the name of the function here.
0:34 I'd left out the s, and just down here in
0:37 Pokeman.append, I had a square bracket
0:40 here in front of the i, instead of a curve bracket.
0:44 Really small typos. Things that happen. Love it.
0:48 You would have caught it when you ran Flask run
0:50 but is you copy the code directly from the repo
0:52 you wouldn't have seen that. So getting out of that
0:56 let's do Flask run. There is our site.
1:00 We have it here. Let's just refresh.
1:02 Let's make sure it works. Yes, it works.
1:06 All right. Now if we punch in a color here
1:09 what's going to happen is
1:10 it's going to take the color back to our...
1:12 It's going to post the color back to our backend.
1:16 It's then going to hit the API
1:18 get all the Pokemon that match that color from the API
1:23 and then return it back to this page as a list.
1:27 So let's through in black.
1:30 And what happens, absolutely nothing.
1:33 And the reason that is
1:35 is because we haven't done anything with the template.
1:37 With this page itself to say
1:39 well what am I doing with that list.
1:41 So this is the easy part. This is right at the end.
1:43 We're almost there. It's very exciting.
1:46 So let's move into that.
1:47 So we'll close off our script here.
1:51 Right move into templates.
1:55 Bring up Pokemon.html
1:57 and what we want to do is we want to create another div.
2:01 Now this div is going to be a bit of a special one.
2:04 One of the tricky things with this is that
2:05 if we don't have data to present
2:08 what's going to show up on the page?
2:11 So when a person gets to our page for the first time here
2:15 they don't see a list of Pokemon down here
2:17 because they haven't entered anything.
2:19 So what we need to do is have a div
2:21 that is essentially empty
2:23 and only shows data when there is data there to be shown.
2:27 All right, and we're going to specify that
2:31 using some cool code. And what we can do.
2:34 Let's just throw a line break in.
2:36 I always do that. Let's throw in two
2:41 just to give ourselves a lot of space.
2:45 All right. Starting off with our new div.
2:48 This is where our interesting code comes in.
2:51 We're going to say that this div will only
2:53 exist or show anything really
2:56 if that Pokemon list has been passed
2:59 back to our page.
3:01 That is, after someone's entered it
3:03 its generated all the information
3:05 and then returned it through that return function of our
3:08 route for Pokemon
3:10 where it says, return rendered template Pokemon=Pokemon.
3:13 So, only if that has been returned
3:16 is this div going to show something.
3:19 And we can do that using this code tag
3:23 so % if Pokemon.
3:26 Right, this is one of Python's truthiness things.
3:31 If pokemon exist. If Pokemon is true.
3:34 You don't even have to say, is true
3:35 you can just say, if pokemon.
3:38 That's how it works in Python.
3:39 So, if Pokemon has been passed back
3:42 then we can generate ourselves a table.
3:45 So lets throw this code in really quick.
3:47 All right, so this is the code for our table.
3:50 So again, if Pokemon exists
3:52 we are creating a table with the class
3:54 the Mui CSS stuff of Mui table and Mui table bordered.
3:58 That'll give us a nicer looking table, I should say.
4:02 Now we have our table header
4:04 and there are rows for that.
4:05 So, we only have one column, one row
4:08 which is just going to be Pokemon.
4:10 And the header for that is Pokemon
4:12 and we can close that table header off.
4:15 Now we have the body
4:16 so that is what is the body of our table.
4:19 Everything that's going to go in it
4:20 is going to be the Pokemon.
4:22 So we can enter in some special code here.
4:25 Right, so Python code in there for i in pokemon
4:29 we're simply doing a loop for i in pokemon.
4:32 We're going to generate table rows
4:36 and the table data for each one of those rows
4:40 is going to contain the Pokemon name
4:42 which is i in this list.
4:46 So, replacement fields there for i
4:51 table data. Close that off.
4:55 Close off the table row.
4:57 For every object within our Pokemon loop
5:00 our Pokemon list
5:01 we are going to print out that name as table data.
5:05 For every name in that list
5:07 and then we can close off our for loop.
5:14 And then we can close off the rest of our table.
5:17 And after closing off the table
5:19 we then need to close off this if statement up here.
5:22 Otherwise, we will get some errors.
5:24 So, and if
5:28 And then finally we can close off that div.
5:34 Don't worry too much about the lining up.
5:36 This isn't Python code
5:37 so this is html doesn't have to be perfectly square.
5:41 All right. And that should be it.
5:44 Let's quit out of that
5:45 and let's try running our app
5:47 and see what happens.
5:49 All right, we have our page.
5:51 Let's make sure there are things working.
5:52 Yes it is. Go back to our Pokemon list.
5:55 Fingers crossed.
5:56 Let's see what happens. We throw in black.
5:59 And there we go.
6:00 Every Pokemon that was in that black list
6:03 now appears in this table.
6:06 Two line breaks below our original form at the top.
6:10 And we have Snorlax, Murkrow and going through that list.
6:14 So you can do all sorts of funky things with that.
6:16 You can, you know, sort them.
6:17 You could potentially follow that end point URL
6:20 that each one of these has
6:21 and start printing out maybe the image, or
6:24 more data on them, you know.
6:26 Go nuts right and this is cool.
6:29 So we can go yellow
6:31 this will actually refresh this page
6:33 and get rid of this information here
6:36 and put the yellow ones in.
6:37 So, there's Santru.
6:38 There's all the ones that we saw before, right.
6:42 We can go red.
6:44 Get the next one, and so on.
6:46 So that's it.
6:47 This is the rest of the app.
6:48 This is it. It's done.
6:50 Have some fun with it, and in the next video
6:52 we're going to talk about
6:53 how you can expand on this for the ne-