1
00:00:02,130 --> 00:00:05,180
It's great that we can output single values,

2
00:00:05,180 --> 00:00:07,600
but actually on this restaurants page,

3
00:00:07,600 --> 00:00:10,470
I wanna output a real list of restaurants.

4
00:00:10,470 --> 00:00:14,570
So in the end, I wanna repeat, you could say,

5
00:00:14,570 --> 00:00:18,400
this list item here with the restaurant data

6
00:00:18,400 --> 00:00:22,290
for every restaurant that I have stored in my array.

7
00:00:22,290 --> 00:00:25,190
And EJS also makes that very easy.

8
00:00:25,190 --> 00:00:29,030
EJS has built-in support for common tasks like this,

9
00:00:29,030 --> 00:00:32,420
and hence, it's a breeze to actually achieve this.

10
00:00:32,420 --> 00:00:36,350
The great thing about EJS is that you can

11
00:00:36,350 --> 00:00:39,000
output simple values like this,

12
00:00:39,000 --> 00:00:42,150
but you can also use a slightly different syntax

13
00:00:42,150 --> 00:00:47,150
to write your own JavaScript logic inside of this EJS file.

14
00:00:48,870 --> 00:00:50,620
And that means that we'll have a way

15
00:00:50,620 --> 00:00:53,310
of writing our own logic for looping

16
00:00:53,310 --> 00:00:54,580
through all the restaurants

17
00:00:54,580 --> 00:00:57,870
and repeating this list item for every restaurant.

18
00:00:57,870 --> 00:01:01,780
Because we can do the same thing here in this EJS template,

19
00:01:01,780 --> 00:01:05,099
as we would to do in a regular JavaScript file,

20
00:01:05,099 --> 00:01:08,540
if we want to go through all the items in an array

21
00:01:08,540 --> 00:01:11,210
and then do something with every item.

22
00:01:11,210 --> 00:01:12,263
We can write a loop.

23
00:01:13,270 --> 00:01:17,200
So in restaurants EJS, inside of this unordered list,

24
00:01:17,200 --> 00:01:19,570
we in the end wanna loop though all the restaurants

25
00:01:19,570 --> 00:01:22,890
and then create one list item for every restaurant.

26
00:01:22,890 --> 00:01:25,440
The special EJS syntax we need here is again,

27
00:01:25,440 --> 00:01:27,410
smaller than percentage sign,

28
00:01:27,410 --> 00:01:30,064
but now without the equal sign.

29
00:01:30,064 --> 00:01:30,897
And we also need the

30
00:01:30,897 --> 00:01:33,863
closing percentage sign greater than sign here.

31
00:01:34,820 --> 00:01:38,530
And then between those two tags here in the end,

32
00:01:38,530 --> 00:01:40,920
which are only understood by EJS,

33
00:01:40,920 --> 00:01:43,440
we can write JavaScript code.

34
00:01:43,440 --> 00:01:46,480
For example here, we can now write a for-loop

35
00:01:46,480 --> 00:01:49,033
and we can loop through our different restaurants.

36
00:01:50,010 --> 00:01:52,110
So here I can create a constant restaurant

37
00:01:53,006 --> 00:01:55,760
of restaurants, let's say.

38
00:01:55,760 --> 00:01:58,640
We'll have to make sure that restaurants is provided

39
00:01:58,640 --> 00:02:00,873
as a variable to the template later.

40
00:02:02,330 --> 00:02:05,830
And we then have our opening curly brace,

41
00:02:05,830 --> 00:02:09,410
just the opening curly brace, not the closing curly brace.

42
00:02:09,410 --> 00:02:12,250
And then we can put the HTML code

43
00:02:12,250 --> 00:02:14,580
between those curly braces.

44
00:02:14,580 --> 00:02:17,780
And then once we're done after this list item,

45
00:02:17,780 --> 00:02:20,700
we again have smaller than percentage sign,

46
00:02:20,700 --> 00:02:22,330
percentage sign greater than,

47
00:02:22,330 --> 00:02:24,143
and then the closing curly brace.

48
00:02:26,970 --> 00:02:30,750
So that if I fold this list item for the moment

49
00:02:30,750 --> 00:02:33,680
we in the end have almost some JavaScript code here.

50
00:02:33,680 --> 00:02:35,490
I mean, it is JavaScript code,

51
00:02:35,490 --> 00:02:38,740
but mixed into this HTML code.

52
00:02:38,740 --> 00:02:42,840
And the code here, this HTML code, will be repeated.

53
00:02:42,840 --> 00:02:46,370
This might be weird or difficult to wrap your head around,

54
00:02:46,370 --> 00:02:47,203
but in the end,

55
00:02:47,203 --> 00:02:49,410
it's just like writing Java script code

56
00:02:49,410 --> 00:02:53,520
where you now can also repeat some HTML logic.

57
00:02:53,520 --> 00:02:56,220
And it's very common to do something like this,

58
00:02:56,220 --> 00:03:01,220
to repeat HTML content with a for-loop in EJS templates,

59
00:03:01,470 --> 00:03:04,220
because it turns out that on a lot of websites,

60
00:03:04,220 --> 00:03:06,633
you wanna output some lists of data.

61
00:03:07,630 --> 00:03:09,040
I'll also indent this here,

62
00:03:09,040 --> 00:03:10,960
even though it's technically not required,

63
00:03:10,960 --> 00:03:12,310
but to make it really clear

64
00:03:12,310 --> 00:03:14,820
that this belongs to this for-loop.

65
00:03:14,820 --> 00:03:17,630
And now we can use this restaurant constant,

66
00:03:17,630 --> 00:03:20,380
which we create here inside of that for-loop,

67
00:03:20,380 --> 00:03:24,190
just as it is the case in standard JavaScript.

68
00:03:24,190 --> 00:03:26,640
There, you can also use that constant

69
00:03:26,640 --> 00:03:30,430
that is created in the for-loop inside of the for-loop.

70
00:03:30,430 --> 00:03:33,770
Here it's the same, even though this is HTML code,

71
00:03:33,770 --> 00:03:36,480
and to refer to output the restaurant title

72
00:03:36,480 --> 00:03:40,550
we can now again use smaller than percentage equals

73
00:03:40,550 --> 00:03:45,043
and then the closing tag to output restaurant.name.

74
00:03:46,200 --> 00:03:51,200
Now I'm using the equals EJS syntax again, as I did up here,

75
00:03:51,600 --> 00:03:55,190
because here I now wanna output a single value again.

76
00:03:55,190 --> 00:03:57,440
The name of the restaurant.

77
00:03:57,440 --> 00:03:59,350
And I'm using restaurant.name

78
00:03:59,350 --> 00:04:01,540
because restaurant is my constant here.

79
00:04:01,540 --> 00:04:05,350
And I know that restaurants will be an array full of objects

80
00:04:05,350 --> 00:04:06,960
because in restaurants.sjon

81
00:04:06,960 --> 00:04:11,160
we have a bunch of objects as values.

82
00:04:11,160 --> 00:04:12,720
And the keys here,

83
00:04:12,720 --> 00:04:15,310
these are keys that are available

84
00:04:15,310 --> 00:04:18,360
on those objects to access the different values.

85
00:04:18,360 --> 00:04:21,033
So, .name will give me the name of the restaurant.

86
00:04:22,211 --> 00:04:25,230
And we can now repeat this here for Mexican,

87
00:04:25,230 --> 00:04:26,453
that's the cuisine.

88
00:04:27,650 --> 00:04:30,990
And for the address here,

89
00:04:30,990 --> 00:04:33,470
just make sure that the keys you use here

90
00:04:33,470 --> 00:04:36,283
are the keys that are stored in the .json file.

91
00:04:38,880 --> 00:04:41,250
Here I then have this description.

92
00:04:41,250 --> 00:04:43,223
So that is the description.

93
00:04:44,450 --> 00:04:47,860
And then here, I actually want to inject

94
00:04:47,860 --> 00:04:51,100
a dynamic value as an attribute value.

95
00:04:51,100 --> 00:04:53,310
And that's possible as well.

96
00:04:53,310 --> 00:04:58,170
You can not just use the EJS placeholders here

97
00:04:58,170 --> 00:05:01,740
in places where you wanna show some text to the user,

98
00:05:01,740 --> 00:05:05,090
you can use them anywhere in your HTML code,

99
00:05:05,090 --> 00:05:08,400
including attribute values.

100
00:05:08,400 --> 00:05:11,860
So here as a value for ref on this anchor tech

101
00:05:11,860 --> 00:05:15,173
I'll use restaurant.website,

102
00:05:16,280 --> 00:05:18,983
because website is my key here.

103
00:05:20,990 --> 00:05:23,360
And if I now save all of that,

104
00:05:23,360 --> 00:05:27,460
that should work as soon as we ensure that restaurants

105
00:05:27,460 --> 00:05:31,250
is made available as a key for this template,

106
00:05:31,250 --> 00:05:34,313
just as we made numberOfRestaurants available.

107
00:05:35,310 --> 00:05:38,450
So an app.js here on this render method,

108
00:05:38,450 --> 00:05:42,640
besides passing numberOfRestaurants into the render method,

109
00:05:42,640 --> 00:05:45,800
I now also pass a second key value pair here

110
00:05:45,800 --> 00:05:48,583
separated by a comma, and that's restaurants.

111
00:05:49,690 --> 00:05:52,840
If you chose a different name in your template here,

112
00:05:52,840 --> 00:05:54,270
instead of restaurants,

113
00:05:54,270 --> 00:05:57,870
then you should choose a different name here as well.

114
00:05:57,870 --> 00:05:59,650
But for me it's restaurants

115
00:05:59,650 --> 00:06:04,650
and the value is my stored restaurants array.

116
00:06:04,750 --> 00:06:06,490
So I reformat it to this.

117
00:06:06,490 --> 00:06:08,750
Here I'm parsing in storedRestaurants,

118
00:06:08,750 --> 00:06:12,340
which are these parsed restaurants from my .json file,

119
00:06:12,340 --> 00:06:14,970
and that is this array of restaurant objects

120
00:06:14,970 --> 00:06:18,143
that will be made available to that template.

121
00:06:19,310 --> 00:06:23,770
If we now save all of that and we reload this page,

122
00:06:23,770 --> 00:06:26,683
we see our restaurants here.

123
00:06:27,670 --> 00:06:32,000
And if I hover over these view website buttons here

124
00:06:32,000 --> 00:06:34,690
in the very bottom left corner of this page,

125
00:06:34,690 --> 00:06:38,713
you see the different website URL, so that's also working.

126
00:06:39,860 --> 00:06:44,050
And that now is another a key feature of EJS.

127
00:06:44,050 --> 00:06:46,960
We cannot just output single values,

128
00:06:46,960 --> 00:06:49,160
though that's also an important feature,

129
00:06:49,160 --> 00:06:51,780
but we can use this slightly different syntax

130
00:06:51,780 --> 00:06:55,800
to basically write any JavaScript code, including,

131
00:06:55,800 --> 00:07:00,800
and very important, loop code to repeat some HTML content.