NOTE
This file was generated by Descript <www.descript.com>
1

00:00:01,410  -->  00:00:02,820
Hi guys, and welcome back.

2

00:00:02,850  -->  00:00:08,250
Continuing with our Jinja2 lectures,
let's learn about how to use loops

3

00:00:08,280  -->  00:00:12,990
in Jinja2 and how we can repeat the
creation of HTML elements or really

4

00:00:13,050  -->  00:00:15,600
any text we want using for loops.

5

00:00:15,720  -->  00:00:16,490
Let's get to it.

6

00:00:17,133  -->  00:00:20,493
So in this example, we've got a
list of planets and let's say we

7

00:00:20,493  -->  00:00:24,453
want to display them in our HTML
page using a list of bullet points.

8

00:00:24,912  -->  00:00:27,342
We can do that using Jinja2's for loop.

9

00:00:27,552  -->  00:00:29,302
Let's have a look at how that would go.

10

00:00:29,881  -->  00:00:32,141
First thing to do is create your template.

11

00:00:32,141  -->  00:00:35,302
I have created the for loop
template in here which is empty.

12

00:00:35,632  -->  00:00:38,722
It just says planets in our solar
system and the body has nothing.

13

00:00:39,052  -->  00:00:43,012
We're going to go to app.py and here
we're going to return the render

14

00:00:43,012  -->  00:00:48,692
template of for loop.html, and
we're going to pass in the planets.

15

00:00:49,232  -->  00:00:51,721
We've got the planet's
variable in our template.

16

00:00:51,751  -->  00:00:53,641
Let's go over there and use it.

17

00:00:53,761  -->  00:00:58,151
So what we're going to do is we're
going to create an unordered list.

18

00:00:58,151  -->  00:01:02,561
A list of bullet points and then we're
going to use the exact same syntax

19

00:01:02,561  -->  00:01:04,391
as we would in Python for a for loop.

20

00:01:04,691  -->  00:01:08,172
But remember we have to put it in
between the curly brace percent symbol.

21

00:01:08,472  -->  00:01:12,972
So we'll do curly brace percent
symbol and then for planet in planets.

22

00:01:13,582  -->  00:01:16,972
And we close with the percent
symbol and the curly brace.

23

00:01:17,451  -->  00:01:20,161
And then we do the same thing for endfor.

24

00:01:20,301  -->  00:01:24,692
This is not something that we use in
Python, but we do need this in Jinja2

25

00:01:24,711  -->  00:01:26,601
so it knows when the for loop ends.

26

00:01:27,141  -->  00:01:31,222
Remember Jinja2, just like HTML
does not care for indentation,

27

00:01:31,491  -->  00:01:32,601
which is why we need this.

28

00:01:32,732  -->  00:01:36,261
In Python,we don't, because we've got
indentation to tell the interpreter

29

00:01:36,261  -->  00:01:40,101
when the for loop ends . Then in
here, we're going to write the HTML

30

00:01:40,131  -->  00:01:44,651
that will get added to the document
for every iteration of the for loop.

31

00:01:44,931  -->  00:01:47,811
So in my case, I want to add a
new bullet point for every planet.

32

00:01:48,051  -->  00:01:51,211
So I'll do <li> and in
here we'll do planet.

33

00:01:51,398  -->  00:01:55,328
That is just going to interpolate
the planet value as the text content

34

00:01:55,358  -->  00:01:59,768
of the li element which is going
to get added to this <ul> for

35

00:01:59,768  -->  00:02:02,268
every element in the planets list.

36

00:02:02,560  -->  00:02:04,730
All right, let's run this
and see what happens.

37

00:02:05,026  -->  00:02:05,756
So there we have it.

38

00:02:05,778  -->  00:02:07,728
We've got our list of planets.

39

00:02:08,028  -->  00:02:09,978
Normally of course, in a
website, you'd have some titles

40

00:02:09,978  -->  00:02:11,088
or something else as well.

41

00:02:11,238  -->  00:02:15,648
And in the ebook we show a more complete
example, but this is how you do that.

42

00:02:16,149  -->  00:02:20,459
You can iternate through dictionary
objects just as you would in Python.

43

00:02:20,459  -->  00:02:22,859
So let's say that
planets was a dictionary.

44

00:02:23,249  -->  00:02:27,676
You could do .items and then
you can do key and value here,

45

00:02:27,676  -->  00:02:29,636
just like we would in Python.

46

00:02:29,666  -->  00:02:32,396
I've shown this earlier on
in the Python refresher.

47

00:02:32,396  -->  00:02:35,606
So this is something that you could
do if planets was a dictionary,

48

00:02:35,606  -->  00:02:36,736
which at the moment, it's not.

49

00:02:36,952  -->  00:02:40,579
If it was, you could do this, you
can also do values or anything else.

50

00:02:40,909  -->  00:02:45,289
Remember that here you can call the
Python methods associated with planets.

51

00:02:45,499  -->  00:02:49,249
If that was a dictionary, you can
call any method of dictionary in here.

52

00:02:49,765  -->  00:02:55,435
So in that vein let's show another example
where we use both loops and conditionals.

53

00:02:55,720  -->  00:02:58,510
I'm here in app.py and I've
done a couple of things.

54

00:02:58,510  -->  00:03:01,870
I've created a new route and
function associated with it.

55

00:03:02,050  -->  00:03:06,970
I've got a new empty HTML file that
we're going to use as the example.

56

00:03:07,477  -->  00:03:11,837
What we're going to do here is we're
going to go through users and the

57

00:03:11,867  -->  00:03:13,437
operating system they like to use.

58

00:03:13,837  -->  00:03:18,277
We're going to have some list
of user operating systems.

59

00:03:18,337  -->  00:03:21,547
And again, this could be a
dictionary where, for example, Bob.

60

00:03:21,712  -->  00:03:23,372
Smith uses Windows.

61

00:03:24,092  -->  00:03:27,372
Or you could have something
like a list of tuples.

62

00:03:27,542  -->  00:03:29,672
Bob Smith uses Windows.

63

00:03:29,672  -->  00:03:30,482
This is totally fine.

64

00:03:30,752  -->  00:03:33,242
Either is a valid way to store data.

65

00:03:33,452  -->  00:03:35,642
Because I haven't shown
you the dictionaries yet.

66

00:03:35,672  -->  00:03:37,472
We're going to use
dictionaries in this example.

67

00:03:37,977  -->  00:03:43,377
Here I've got my four users that have
operating systems associated with them.

68

00:03:43,377  -->  00:03:46,227
So we've got Bob Smith using
Windows,  Anne Pun using Mac,

69

00:03:46,257  -->  00:03:48,327
Adam, Linux and me using Windows.

70

00:03:48,934  -->  00:03:51,304
And now what we're going to do
is we want to iterate through

71

00:03:51,304  -->  00:03:54,844
these in our template and display
some information about each user.

72

00:03:55,114  -->  00:03:59,404
So here, we've got the dictionary of
users and the operating systems they use.

73

00:03:59,404  -->  00:04:02,764
Now let's go to our template
and render these out.

74

00:04:02,794  -->  00:04:08,104
Of course, first we have to return
render template of the loops and

75

00:04:08,194  -->  00:04:14,134
conditionals dot HTML, and the user
operating systems are going to be

76

00:04:14,344  -->  00:04:16,444
the user operating systems like that.

77

00:04:16,684  -->  00:04:20,344
Now let's go over to our template
and we can use them here.

78

00:04:20,837  -->  00:04:24,347
I've added a couple of titles
in here just for completeness.

79

00:04:24,527  -->  00:04:28,397
And now what we want to do is we want
to first iterate over the dictionary.

80

00:04:28,397  -->  00:04:33,730
So we'll say for user and operating
system in user os dot items.

81

00:04:34,237  -->  00:04:38,942
Remember this is how we iterate through
the keys and values of a dictionary.

82

00:04:39,212  -->  00:04:41,792
And we're going to put the endfor in
here so we don't forget it later on.

83

00:04:42,288  -->  00:04:46,428
And then we can just print the user on
the operating system out if we want it.

84

00:04:46,698  -->  00:04:52,278
Or in our case, we're going to say
if, os equal windows, then we'll say

85

00:04:52,278  -->  00:04:56,898
something like, user is a windows user.

86

00:04:57,129  -->  00:04:57,729
Something like that.

87

00:04:58,509  -->  00:05:03,937
Then we can have our elif os
equal MacOS All right, so I've

88

00:05:03,937  -->  00:05:05,117
completed the if statement.

89

00:05:05,305  -->  00:05:08,605
Some of, you may have noticed
that we could simplify this quite

90

00:05:08,605  -->  00:05:12,775
substantially because this if statement
in here doesn't really do anything.

91

00:05:13,015  -->  00:05:19,975
Instead of this entire if statement,
we could just do user is a os

92

00:05:20,095  -->  00:05:23,995
user and that would be doing the
same as these entire if statement.

93

00:05:24,471  -->  00:05:27,351
But the if statement does
give us some flexibility.

94

00:05:27,651  -->  00:05:33,831
For example, if we wanted to show an
emoji, for example, this one, if the user

95

00:05:33,831  -->  00:05:39,261
is a windows user, then we can do that in
here, but we can leave the MacOS and Linux

96

00:05:39,261  -->  00:05:41,181
parts of the if statements unaffected.

97

00:05:41,661  -->  00:05:45,081
Anyway, I just wanted to show you that
you can nest if statements inside for

98

00:05:45,081  -->  00:05:48,381
loops and you can do all sorts of things,
whatever you want, in terms of nesting in

99

00:05:48,381  -->  00:05:50,211
here and Jinja2 is not going to complain.

100

00:05:50,601  -->  00:05:55,101
But do remember don't use if statements
for if statements sake, if you can

101

00:05:55,101  -->  00:05:58,491
do something a bit simpler, like just
printing out the appropriate paragraph

102

00:05:58,521  -->  00:06:01,671
with the interpolation being used
directly, you can do that instead.

103

00:06:02,310  -->  00:06:02,550
Alright.

104

00:06:02,567  -->  00:06:04,127
Thank you guys for
joining me in this video.

105

00:06:04,157  -->  00:06:07,217
I hope you have enjoyed it and
I'll see you in the next one.