#100DaysOfWeb in Python Transcripts
Chapter: Days 17-20: Calling APIs in Flask
Lecture: Returning the data to the Pokemon Template

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

Talk Python's Mastodon Michael Kennedy's Mastodon