#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-