Getting Started With Django

4.3 Rendering Data in an HTML Template

Now, I wanna show you how you can take data that you formed in your context and then render it into your template, and how you actually display that. And more than that, I wanna show you how to actually write some code that can be executed within your templates. So I'm gonna show you both of those things. Now, it's actually quite simple. So what we wanna do here is I want to be able to put some content in this body, even though for purposes of this lesson, it's not gonna show you anything. But I'll show you how to get around that. So what I wanna do now is I wanna take that context that I had. And I want to loop through those applications. And then for each of those applications, I want to create a table row and then display things like Product, Bags Applied, things like that. So let's go ahead and do that now. So what I wanna do is I wanna do a loop. Now, when you're trying to write code that's actually going to execute within your template, you're gonna use the curly brackets, open and close. And then you're also going to have percent signs in here. So you're gonna begin the line with a open curly brace and a percent sign and then you're gonna end it with a close curly brace and a percent sign as well. And then I can write code in here that is actually going to execute. So I can read this very simple Python loop here, I can say for and now I get access to every property that I created in my context. So I get access to this applications property simply by using it by name. So what I can do here is I can say, for application in applications. And then I want to end my loop just like I would any other Python loop. And I'm simply gonna say endfor, just like that. And now everything that I write inside this block is going to be executed for every single member of this list that I passed in. So what do I want to do? Well, I wanna create some rows. I want to do a table row and then in here, I want to do a table column here and I'm going to do this how many times? One, two, three, four, five, six, so I can go ahead and copy this and go and paste it in here five more times. And now, I can go ahead and start to print things out. So what can I print out here? Well, I can display any property of this application, which just so happens to be things like Bags Applied, Application Date, things like that, any sort of properties that I put in here in my model. So as you can see, I can do bags_applied, date_applied. So let's go back into index here, and we'll just throw a couple things in here. And I also wanna know the name of the fertilizer. Now if you remember, when I created that model, I did this double underscore string function here that was used to display things. So I can use that in here as well. So let's go back in here, and I'm going to now, I want to display data. So now, we know how to execute code within our template. How do you actually display data? Well, we're gonna use the double curly brace. Simply by opening and closing these double curly braces, I can now inject content into my template dynamically. So I'm gonna say application.Fertilizer, now it's actually going to use that string function to display the actual name there. And then I can put a couple of other things in here, right? I could do application., and just so I will get this correct, bags_applied, copy and paste. And then I also have date applied, so I'll say application.date_applied, just like that, and then I can also get access to things like the percentages I had here. But I'm actually gonna hold off on that because I wanna do some other calculations and things for those. So we're just gonna kind of put some placeholders in here. We'll just put in here n, p and k. So I could just spit out some data but I wanna show you some other more interesting calculations that we can do later on. But for now, we'll just use this as placeholders. So I'm gonna go ahead and save that. I can come back in here and I can refresh my page. And of course, nothing changes and that's because I don't have any data here in this application. Because I haven't really put anything into the database yet, and that's okay. So what we also can do is just to say, all right, well fine, if there's no applications, I can just spit out some data just so you can see it work. This for loop right here has a little bit of a helper that we could add in here. And we could say empty, which means if this collection is empty, let's go ahead and display something here. So let's just go and see if we can throw a p tag in here, and we'll say No applications, like that. Let's go ahead and save that, go ahead and re-render this, and you'll see there's no application. So we do see that we are able to put some information in here, even though we don't really have anything, so we can kinda check for the empty scenario. And we're gonna take this out later when we actually put some applications in there. And we'll kinda format this as an actual table so we can see what's going on. But at least now that you can see that we're able to render things conditionally based on data that we're passing into our template as our context.