NOTE This file was generated by Descript 1 00:00:01,110 --> 00:00:02,580 Hi guys, and welcome back. 2 00:00:02,610 --> 00:00:05,460 In this video, let's learn how to work with Python's data 3 00:00:05,460 --> 00:00:08,189 structures within Jinja2 templates. 4 00:00:08,340 --> 00:00:09,180 Let's get started. 5 00:00:09,965 --> 00:00:13,775 I'm going to create a data_structures.html template here. 6 00:00:13,825 --> 00:00:17,095 I'm going to use this to show you how you can use data structures in 7 00:00:17,095 --> 00:00:21,085 Jinja2 So the first data structure I want to show you is the list. 8 00:00:21,205 --> 00:00:26,755 Python lists can come into Jinja2 and then in Jinja2, we can just access the 9 00:00:26,755 --> 00:00:28,915 particular indices that we want to access. 10 00:00:28,915 --> 00:00:32,875 So here you can see we've got movies zero, and that is going to access the 11 00:00:32,875 --> 00:00:35,465 first element of the movies list or tuple. 12 00:00:35,965 --> 00:00:38,435 And that's totally fine for Jinja2, movies two. 13 00:00:38,595 --> 00:00:39,755 Of course, you will get an error. 14 00:00:39,905 --> 00:00:45,660 If the movies list or tuple doesn't have an index zero or one or two. 15 00:00:46,260 --> 00:00:50,970 So for example, if we do this, but movies is an empty list, we're going to get an 16 00:00:51,000 --> 00:00:54,810 error and the template is going to crash and it's not going to render correctly. 17 00:00:55,310 --> 00:00:57,020 But this is the first one that we've got here. 18 00:00:57,050 --> 00:01:01,917 Let's go over to app.py where I've got my slash data structures endpoint 19 00:01:02,127 --> 00:01:04,227 and we're going to render this. 20 00:01:04,700 --> 00:01:06,680 Here I have got a lists of movies. 21 00:01:06,680 --> 00:01:10,050 That's just the square brackets with the three strings inside 22 00:01:10,070 --> 00:01:11,300 them separated by commas. 23 00:01:11,600 --> 00:01:13,380 And what we're going to do is we're going to render template. 24 00:01:13,400 --> 00:01:16,580 We're going to pass in data_structures.html in there, 25 00:01:16,880 --> 00:01:19,040 and then movies equal movies. 26 00:01:19,620 --> 00:01:23,250 Remember, this is the movies value that is going to get interpolated. 27 00:01:23,250 --> 00:01:26,310 And these is the movies variable that is going to provide the 28 00:01:26,310 --> 00:01:27,810 values to be interpolated. 29 00:01:28,310 --> 00:01:29,810 Let's start our app. 30 00:01:30,310 --> 00:01:34,180 And here we are in the data structures page, and you can see that we've 31 00:01:34,180 --> 00:01:37,240 got, "Leon the Professional", "The Usual Suspects", and "A Beautiful 32 00:01:37,240 --> 00:01:40,330 Mind" interpolated into our template. 33 00:01:41,020 --> 00:01:45,890 So Jinja2 can access indices of data structures and that can be really useful. 34 00:01:46,390 --> 00:01:50,020 The next thing we're going to look at is dictionary operations. 35 00:01:50,080 --> 00:01:53,670 So let's add another part to this template. 36 00:01:53,830 --> 00:01:55,830 And we're going to do something like this. 37 00:01:56,520 --> 00:02:01,110 So here we've got a Dictionary Operations title and inside it, we've got a 38 00:02:01,140 --> 00:02:03,790 paragraph and it says: this is a car. 39 00:02:03,850 --> 00:02:07,870 And then we're accessing the brand key of car. 40 00:02:07,990 --> 00:02:11,140 So this is how we access dictionary values in Python. 41 00:02:11,350 --> 00:02:13,070 And we can do the same thing with Jinja2. 42 00:02:13,090 --> 00:02:16,120 So we've got a car brand car model. 43 00:02:16,320 --> 00:02:18,340 And it was built in car year. 44 00:02:18,825 --> 00:02:22,815 Obviously we have to pass in a dictionary that has these three keys. 45 00:02:22,975 --> 00:02:25,315 If we pass a dictionary that is missing any of these keys, 46 00:02:25,525 --> 00:02:26,365 we're going to get an error. 47 00:02:26,515 --> 00:02:28,195 I'll show you what that error looks like in just a moment. 48 00:02:28,695 --> 00:02:34,605 Let's go back to app.py and create a car dictionary that we can just pass in. 49 00:02:34,635 --> 00:02:36,405 So it's going to be like this. 50 00:02:36,405 --> 00:02:39,495 We've got a car is a Tesla Roadster. 51 00:02:39,495 --> 00:02:40,365 Misspelled that. 52 00:02:40,755 --> 00:02:41,775 The year is 2020. 53 00:02:42,275 --> 00:02:45,215 Now as well as the movies, we can pass in the car. 54 00:02:45,215 --> 00:02:48,035 And we can say car equal car, just like that. 55 00:02:48,535 --> 00:02:52,225 We do have to restart the app, but now when we go back here. 56 00:02:52,225 --> 00:02:53,395 You can see that we have. 57 00:02:53,475 --> 00:02:56,115 This is a Tesla Roadster built in 2020. 58 00:02:56,615 --> 00:02:56,945 All right. 59 00:02:56,945 --> 00:03:00,365 So up to here, I imagine it's relatively straightforward. 60 00:03:00,365 --> 00:03:03,995 We've got a list or tuple access or index access. 61 00:03:04,205 --> 00:03:07,475 We've gone the dictionary or key access and that's all fine. 62 00:03:07,945 --> 00:03:11,755 Something else that we can do in Jinja2, which starts to blur the lines 63 00:03:11,755 --> 00:03:15,535 a little bit between what is Jinja2 and what is Python, is that in Jinja2, 64 00:03:15,535 --> 00:03:18,265 we can also access object attributes. 65 00:03:18,415 --> 00:03:21,955 So if we have a custom object or a custom class. 66 00:03:22,545 --> 00:03:25,915 In Jinja2, we can access the specific attribute of that class. 67 00:03:26,410 --> 00:03:30,400 I'm going to start off by creating the class here in Python first. 68 00:03:30,640 --> 00:03:35,647 This is going to be a class called GalileanMoons, and this is just going 69 00:03:35,647 --> 00:03:38,617 to be a class to hold the Jupiter moons. 70 00:03:38,647 --> 00:03:40,577 So it's going to have an init method and then it's going to have 71 00:03:40,577 --> 00:03:43,757 first, second, third, and fourth. 72 00:03:44,257 --> 00:03:47,217 And in here, we're just going to do self.first, = first and so on. 73 00:03:47,467 --> 00:03:51,197 So this is a pretty common way to store data in your applications. 74 00:03:51,197 --> 00:03:53,927 You create classes and the store some data in them. 75 00:03:53,957 --> 00:03:57,077 Let's say that we had an object of this class. 76 00:03:57,077 --> 00:04:02,322 We will go down here and we'll say moons equal GalileanMoons and we'll 77 00:04:02,322 --> 00:04:08,162 pass Io, Europa, Ganymede and Callisto. 78 00:04:08,682 --> 00:04:09,152 Pretty common. 79 00:04:09,168 --> 00:04:13,128 instead of moons, you might have user data or you might have data 80 00:04:13,128 --> 00:04:17,058 about a micro blog post that is in a class or something like that. 81 00:04:17,598 --> 00:04:19,638 But the idea remains the same. 82 00:04:20,218 --> 00:04:23,128 Now we can pass this object. 83 00:04:23,218 --> 00:04:25,288 We can say moons equal moons, for example. 84 00:04:25,528 --> 00:04:29,698 And again, this is going to create the moons value in our template and the 85 00:04:29,698 --> 00:04:33,718 value of that thing that Jinja2 has access to is going to be this object. 86 00:04:34,228 --> 00:04:36,688 So how do we use that object in the template? 87 00:04:36,718 --> 00:04:38,218 Well, it's actually pretty straightforward. 88 00:04:38,278 --> 00:04:42,388 Let's create another title in here, that we're going to call something 89 00:04:42,418 --> 00:04:47,478 like, Custom Data Structure Operations, and then we'll create a paragraph. 90 00:04:47,508 --> 00:04:53,148 And in here we can say The four Galilean moons of Jupiter are. 91 00:04:53,648 --> 00:04:59,378 As you might expect, moons.first is the way to access data coming from an object. 92 00:04:59,618 --> 00:05:01,478 Just as we would do in Python. 93 00:05:01,833 --> 00:05:04,203 And the guy that developed Jinja2 works in Python. 94 00:05:04,233 --> 00:05:06,273 He also happened to develop Flask. 95 00:05:06,633 --> 00:05:12,042 So these two are very well linked and the syntax for Jinja2 is very 96 00:05:12,042 --> 00:05:13,662 similar to the syntax for Python. 97 00:05:13,902 --> 00:05:19,602 Although it is worth remembering that Jinja2 code is not Python. 98 00:05:19,662 --> 00:05:23,142 There is no Python interpreter running in the background to 99 00:05:23,142 --> 00:05:25,542 evaluate this as if it were Python. 100 00:05:25,602 --> 00:05:30,012 This is Jinja2 with the Jinja2 engine running and understanding what 101 00:05:30,042 --> 00:05:31,842 data this is and how to access it. 102 00:05:32,112 --> 00:05:35,322 But Jinja2 cannot do everything that Python can do. 103 00:05:35,822 --> 00:05:38,972 You can only do the things that it has been programmed to do. 104 00:05:39,302 --> 00:05:42,722 But it can access Python objects which is really quite handy so here we've 105 00:05:42,722 --> 00:05:47,282 got the four Galilean moons of Jupiter, moons.first, second, third, and fourth. 106 00:05:47,782 --> 00:05:48,082 All right. 107 00:05:48,082 --> 00:05:51,892 So if we save and refresh that we'll be able to access that. 108 00:05:52,392 --> 00:05:53,802 You can see it just there. 109 00:05:54,222 --> 00:05:57,012 And as usual, because we've got three values in here and they're 110 00:05:57,012 --> 00:05:58,122 just starting to get a bit long. 111 00:05:58,272 --> 00:06:01,875 You might want to create a kwargs dictionary here. 112 00:06:01,935 --> 00:06:07,135 Remember, you can call this whatever you want but in here we can do movies: movies. 113 00:06:07,655 --> 00:06:11,125 Car: car and moons: moons. 114 00:06:11,195 --> 00:06:14,905 And then we could pass these in as **kwargs. 115 00:06:15,035 --> 00:06:15,725 You can do this. 116 00:06:15,725 --> 00:06:17,285 And that may be a little bit simpler. 117 00:06:17,315 --> 00:06:19,535 Although I think with three, especially with these three names 118 00:06:19,535 --> 00:06:22,505 that are all quite short, I think it's okay to leave them in line. 119 00:06:22,775 --> 00:06:23,585 Totally up to you. 120 00:06:23,795 --> 00:06:25,775 Just as a reminder that you can do this. 121 00:06:26,654 --> 00:06:27,044 All right. 122 00:06:27,074 --> 00:06:28,394 That's everything for this video. 123 00:06:28,394 --> 00:06:33,704 We've learned a lot about how to work with Jinja2 templates using the Flask apps. 124 00:06:33,824 --> 00:06:36,824 So I hope you've enjoyed this video and I will see you in the next one.