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 and this is what we were expecting, right, 38 00:02:29,510 --> 00:02:33,133 and here is the result of doing "url.parse" 39 00:02:34,810 --> 00:02:38,030 So we get the query object here, 40 00:02:38,030 --> 00:02:41,130 and so here, we have a nice object which tells us 41 00:02:41,130 --> 00:02:44,760 that id is 0, right, 42 00:02:44,760 --> 00:02:46,950 so that's beautiful. 43 00:02:46,950 --> 00:02:49,400 And then, right below that, we actually have 44 00:02:49,400 --> 00:02:51,620 the second piece that we need, 45 00:02:51,620 --> 00:02:55,380 which is just the pathname, okay. 46 00:02:55,380 --> 00:02:58,183 So, our route is using this pathname, 47 00:02:58,183 --> 00:03:02,000 so just "/product," and then we need to know the query 48 00:03:02,000 --> 00:03:05,810 in order to respond accordingly to the id of 0. 49 00:03:05,810 --> 00:03:07,670 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 with exactly the values that we have here. 72 00:04:22,230 --> 00:04:24,300 So query will be this one, 73 00:04:24,300 --> 00:04:28,113 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.