1
00:00:01,450 --> 00:00:03,480
‫So in this video we're going to learn

2
00:00:03,480 --> 00:00:07,408
‫how to parse some variables from the URL

3
00:00:07,408 --> 00:00:11,563
‫in order to be able to build the product page.

4
00:00:13,320 --> 00:00:15,690
‫So remember how right in the beginning

5
00:00:15,690 --> 00:00:18,733
‫I imported the URL module,

6
00:00:20,120 --> 00:00:22,080
‫so this one here,

7
00:00:22,080 --> 00:00:26,663
‫in order to be able to parse variables right off the URL.

8
00:00:28,420 --> 00:00:33,420
‫Okay. So, as a first step,

9
00:00:34,040 --> 00:00:35,990
‫let's actually once more

10
00:00:38,100 --> 00:00:42,080
‫log "req.url" to the console

11
00:00:44,250 --> 00:00:47,970
‫and then another thing that I want to log is to actually...

12
00:00:51,070 --> 00:00:55,843
‫the result of using "url.parse" on this URL.

13
00:00:58,780 --> 00:01:03,290
‫So, again, parse is to basically parse the variables

14
00:01:03,290 --> 00:01:05,703
‫out of the URL.

15
00:01:06,710 --> 00:01:08,590
‫So, something like this.

16
00:01:08,590 --> 00:01:13,410
‫So, what we want is "id = 0," right,

17
00:01:13,410 --> 00:01:17,970
‫because right now, the "req.url"

18
00:01:17,970 --> 00:01:19,480
‫is all of this,

19
00:01:19,480 --> 00:01:22,310
‫so this entire URL, and of course,

20
00:01:22,310 --> 00:01:24,190
‫we don't have any route for that.

21
00:01:24,190 --> 00:01:29,190
‫So nothing here in these kind of routers that we have here,

22
00:01:30,510 --> 00:01:33,750
‫actually matches this entire URL.

23
00:01:33,750 --> 00:01:35,797
‫So that's why we get "Page not Found!"

24
00:01:36,910 --> 00:01:40,663
‫And so that's also why we need to change some stuff here.

25
00:01:43,240 --> 00:01:46,620
‫Okay, so let me parse the URL here,

26
00:01:46,620 --> 00:01:48,380
‫so that you can take a look at the result

27
00:01:48,380 --> 00:01:51,090
‫to see what we need to do next.

28
00:01:51,090 --> 00:01:54,800
‫I also need to pass "true" here into this parse function

29
00:01:54,800 --> 00:01:58,430
‫in order to actually parse the query into an object.

30
00:01:58,430 --> 00:02:02,260
‫So, with query, I mean this part here.

31
00:02:02,260 --> 00:02:05,163
‫Okay, so this is called the query string,

32
00:02:06,270 --> 00:02:10,480
‫alright, and so that's what we're effectively parsing,

33
00:02:10,480 --> 00:02:12,363
‫that part from the URL.

34
00:02:14,260 --> 00:02:15,600
‫So restart it

35
00:02:17,810 --> 00:02:21,463
‫and let's just take a look at the logs that we get.

36
00:02:23,490 --> 00:02:26,420
‫So, first is the "req.url"

37
00:02:26,420 --> 00:02:29,510
‫{\an8}and this is what we were expecting, right,

38
00:02:29,510 --> 00:02:33,133
‫{\an8}and here is the result of doing "url.parse"

39
00:02:34,810 --> 00:02:38,030
‫{\an8}So we get the query object here,

40
00:02:38,030 --> 00:02:41,130
‫{\an8}and so here, we have a nice object which tells us

41
00:02:41,130 --> 00:02:44,760
‫{\an8}that id is 0, right,

42
00:02:44,760 --> 00:02:46,950
‫{\an8}so that's beautiful.

43
00:02:46,950 --> 00:02:49,400
‫{\an8}And then, right below that, we actually have

44
00:02:49,400 --> 00:02:51,620
‫{\an8}the second piece that we need,

45
00:02:51,620 --> 00:02:55,380
‫{\an8}which is just the pathname, okay.

46
00:02:55,380 --> 00:02:58,183
‫{\an8}So, our route is using this pathname,

47
00:02:58,183 --> 00:03:02,000
‫{\an8}so just "/product," and then we need to know the query

48
00:03:02,000 --> 00:03:05,810
‫{\an8}in order to respond accordingly to the id of 0.

49
00:03:05,810 --> 00:03:07,670
‫{\an8}So in this case, for example,

50
00:03:07,670 --> 00:03:11,063
‫loading the avocado product, which is the first one.

51
00:03:11,959 --> 00:03:14,440
‫But if it was number two, for example,

52
00:03:14,440 --> 00:03:19,070
‫then loading this broccoli, right.

53
00:03:19,070 --> 00:03:21,770
‫And so this query and this pathname

54
00:03:21,770 --> 00:03:23,943
‫is what we're going to use for doing that.

55
00:03:25,860 --> 00:03:29,740
‫So, this one we don't need anymore.

56
00:03:29,740 --> 00:03:33,010
‫We also don't want to log anything to the console now

57
00:03:33,010 --> 00:03:35,530
‫because what we want to do instead

58
00:03:35,530 --> 00:03:38,630
‫is to create two variables, called query

59
00:03:39,690 --> 00:03:40,723
‫and ...

60
00:03:41,679 --> 00:03:43,150
‫pathName.

61
00:03:43,150 --> 00:03:46,903
‫And we can do so using the stacks, the structuring.

62
00:03:49,200 --> 00:03:51,560
‫So, again, I hope that you are familiar

63
00:03:51,560 --> 00:03:56,560
‫with this syntax here, and this is how it actually works.

64
00:03:57,380 --> 00:04:02,380
‫So, this object here, it has query and pathName.

65
00:04:02,780 --> 00:04:04,880
‫So by using this structuring like this,

66
00:04:04,880 --> 00:04:07,521
‫with these exact property names,

67
00:04:07,521 --> 00:04:10,050
‫actually it has to be like this.

68
00:04:10,050 --> 00:04:12,150
‫So with these two exact property names,

69
00:04:12,150 --> 00:04:15,000
‫it will create these two variables,

70
00:04:15,000 --> 00:04:18,254
‫one called query and one called pathname,

71
00:04:18,254 --> 00:04:22,230
‫{\an8}with exactly the values that we have here.

72
00:04:22,230 --> 00:04:24,300
‫{\an8}So query will be this one,

73
00:04:24,300 --> 00:04:28,113
‫{\an8}and pathname will be "/product," in this case.

74
00:04:29,580 --> 00:04:31,880
‫Great. Now all I have to do is go ahead

75
00:04:31,880 --> 00:04:34,733
‫and replace this here with this one.

76
00:04:41,370 --> 00:04:42,203
‫All right.

77
00:04:45,572 --> 00:04:47,100
‫Let's delete this one, and just to make sure

78
00:04:47,100 --> 00:04:51,080
‫let's actually log the query to the console

79
00:04:51,080 --> 00:04:53,933
‫in case we are on the product page.

80
00:04:55,597 --> 00:04:59,373
‫"console.log" the query object.

81
00:05:05,070 --> 00:05:07,800
‫And now, we're back to finding the page

82
00:05:10,110 --> 00:05:13,360
‫and we also have to query with this id 0.

83
00:05:13,360 --> 00:05:15,350
‫So, perfect. So now we're ready

84
00:05:15,350 --> 00:05:18,350
‫to actually build this page using our template.

85
00:05:18,350 --> 00:05:19,923
‫And that should be very simple,

86
00:05:19,923 --> 00:05:23,710
‫actually way simpler than the overview page,

87
00:05:23,710 --> 00:05:25,480
‫because here we don't have to do

88
00:05:25,480 --> 00:05:28,000
‫any of these crazy loops over here

89
00:05:28,000 --> 00:05:30,500
‫because there's one simple template,

90
00:05:30,500 --> 00:05:33,543
‫all we have to do is to replace everything.

91
00:05:36,040 --> 00:05:39,860
‫So, in the first step, let's actually figure out

92
00:05:39,860 --> 00:05:42,903
‫which is the product that we want to display.

93
00:05:46,910 --> 00:05:50,130
‫So I'm creating a variable called product,

94
00:05:50,130 --> 00:05:54,080
‫and that will be equal to the data object

95
00:05:56,770 --> 00:06:00,827
‫at the position "query.id."

96
00:06:02,680 --> 00:06:04,080
‫Okay, makes sense?

97
00:06:04,080 --> 00:06:06,570
‫So the data object is an array,

98
00:06:06,570 --> 00:06:09,950
‫and we will then retrieve the element

99
00:06:09,950 --> 00:06:13,010
‫at the position that's coming from the query.id.

100
00:06:13,010 --> 00:06:15,130
‫So, if it's zero, then it's element zero,

101
00:06:15,130 --> 00:06:17,663
‫if it's two, it is element number two.

102
00:06:19,170 --> 00:06:21,389
‫Okay, and so this is the simplest way

103
00:06:21,389 --> 00:06:26,389
‫of retrieving an element based on a query string.

104
00:06:26,520 --> 00:06:28,120
‫Now another thing that we need to do

105
00:06:28,120 --> 00:06:32,493
‫is to get this exact same Head here, okay,

106
00:06:36,800 --> 00:06:39,990
‫and finally we simply create our output.

107
00:06:43,196 --> 00:06:46,279
‫So, output is simply replaceTemplate,

108
00:06:49,383 --> 00:06:51,898
‫and the HTML that we need to pass in

109
00:06:51,898 --> 00:06:55,981
‫is the tempOverview, or actually the tempProduct,

110
00:06:58,340 --> 00:07:01,257
‫and what we pass in is the product.

111
00:07:03,960 --> 00:07:05,003
‫And that's it!

112
00:07:08,230 --> 00:07:12,330
‫Now we just send the output as a result,

113
00:07:12,330 --> 00:07:15,850
‫or as a response actually, and so that's it.

114
00:07:15,850 --> 00:07:18,900
‫So this part here makes sense, right?

115
00:07:18,900 --> 00:07:22,550
‫So, again, replaceTemplate expects us

116
00:07:22,550 --> 00:07:25,513
‫to put in a template and a product.

117
00:07:26,350 --> 00:07:30,223
‫So a product is an object with all of these properties.

118
00:07:31,250 --> 00:07:33,610
‫And so that product comes here

119
00:07:33,610 --> 00:07:35,223
‫right from this data object.

120
00:07:36,720 --> 00:07:40,463
‫So in replaceTemplate, we pass in the template product,

121
00:07:41,670 --> 00:07:45,140
‫so this one, that we loaded up from the file

122
00:07:45,140 --> 00:07:48,703
‫right in the beginning, and then product.

123
00:07:49,760 --> 00:07:53,920
‫As I mentioned, of course, the one coming from the array.

124
00:07:53,920 --> 00:07:56,450
‫And so that should actually be it.

125
00:07:56,450 --> 00:07:58,560
‫So if the template is correct,

126
00:07:58,560 --> 00:08:00,640
‫then this should be working now.

127
00:08:00,640 --> 00:08:02,763
‫So, restarting the server,

128
00:08:04,000 --> 00:08:05,229
‫let's reload it,

129
00:08:05,229 --> 00:08:07,673
‫and indeed, here we go.

130
00:08:08,760 --> 00:08:11,810
‫So, that is great, that makes me really happy,

131
00:08:11,810 --> 00:08:14,609
‫when this kind of stuff works like this,

132
00:08:14,609 --> 00:08:18,633
‫beautiful, everything is perfect.

133
00:08:19,930 --> 00:08:24,020
‫Also this back button, oh that doesn't work.

134
00:08:24,020 --> 00:08:29,020
‫Okay. So we need to change the HTML template here.

135
00:08:30,490 --> 00:08:34,703
‫So where is that? It is in product,

136
00:08:35,660 --> 00:08:39,490
‫and this link here, where is that, ah.

137
00:08:39,490 --> 00:08:42,440
‫Yeah, it points to nowhere basically,

138
00:08:42,440 --> 00:08:46,347
‫and what we want is to go back to overview, right.

139
00:08:50,460 --> 00:08:53,933
‫Restart the server, reload this page,

140
00:08:55,110 --> 00:08:57,543
‫and now, now it works.

141
00:08:59,200 --> 00:09:01,940
‫Let's try out on without the organic patch,

142
00:09:01,940 --> 00:09:03,910
‫and indeed, it is not here.

143
00:09:03,910 --> 00:09:05,970
‫Before it was, and now it's gone.

144
00:09:05,970 --> 00:09:07,900
‫And all of this stuff here of course

145
00:09:07,900 --> 00:09:12,803
‫is dynamic coming from that JSON file. Yeah.

146
00:09:15,090 --> 00:09:17,650
‫So all of this works. Beautiful.

147
00:09:17,650 --> 00:09:20,160
‫That's really really great.

148
00:09:20,160 --> 00:09:25,150
‫And our project, we can now say, is actually finished.

149
00:09:25,150 --> 00:09:28,450
‫Just one more small thing that I want to do,

150
00:09:28,450 --> 00:09:32,740
‫which is just to show you some nice thing that we can do.

151
00:09:32,740 --> 00:09:35,740
‫But besides that, our project is working.

152
00:09:35,740 --> 00:09:39,135
‫So congratulations, you just finished your very first

153
00:09:39,135 --> 00:09:43,430
‫really cool looking node.js project.

154
00:09:43,430 --> 00:09:45,520
‫And it wasn't that hard, right?

155
00:09:45,520 --> 00:09:47,550
‫I mean, some of the things that we did

156
00:09:47,550 --> 00:09:52,550
‫are more related to JavaScript programming in general,

157
00:09:52,670 --> 00:09:56,910
‫and not so much about node.js itself, right?

158
00:09:56,910 --> 00:10:01,370
‫So stuff like this here, which was maybe kind of confusing,

159
00:10:01,370 --> 00:10:04,180
‫but again at the end of the day that is just

160
00:10:04,180 --> 00:10:07,010
‫regular JavaScript really, isn't it?

161
00:10:07,010 --> 00:10:09,060
‫So again, the functionality is there,

162
00:10:09,060 --> 00:10:11,740
‫there's just one more small thing that I want to do

163
00:10:11,740 --> 00:10:15,283
‫in the next video, and when you reach that one,

164
00:10:15,283 --> 00:10:17,083
‫I will tell you what that is.