1 00:00:01,609 --> 00:00:04,900 ‫[Jonas Schmedtman] So we already have for HTML templates. 2 00:00:04,900 --> 00:00:07,790 ‫Now comes the hardest part, which is to 3 00:00:07,790 --> 00:00:11,643 ‫actually replace the placeholders with the content. 4 00:00:13,450 --> 00:00:16,610 ‫So let's actually start with the overview. 5 00:00:16,610 --> 00:00:19,680 ‫And let's give ourselves some breathing space here 6 00:00:19,680 --> 00:00:21,543 ‫and add some comments. 7 00:00:21,543 --> 00:00:23,350 ‫(typing on a keyboard) 8 00:00:23,350 --> 00:00:27,943 ‫So overview page and some comments down here. 9 00:00:30,790 --> 00:00:35,790 ‫So the product page, and there here we have the API. 10 00:00:39,079 --> 00:00:42,079 ‫And then here we have the Not found. 11 00:00:45,650 --> 00:00:48,990 ‫Alright, so that looks a bit better already. 12 00:00:48,990 --> 00:00:52,820 ‫So again, we're starting with the overview page. 13 00:00:52,820 --> 00:00:54,100 ‫And so the first step 14 00:00:54,100 --> 00:00:58,580 ‫is to actually load the template overview. 15 00:00:58,580 --> 00:01:01,770 ‫Okay, so each time there is a new request 16 00:01:01,770 --> 00:01:05,340 ‫for this route, so the adjusted route 17 00:01:05,340 --> 00:01:08,180 ‫or /Overview, the first thing that we're gonna do 18 00:01:08,180 --> 00:01:11,240 ‫is to read the template overview. 19 00:01:11,240 --> 00:01:14,020 ‫But, just like before, we can actually do that 20 00:01:14,020 --> 00:01:16,860 ‫outside of this callback, okay? 21 00:01:16,860 --> 00:01:20,000 ‫Because these templates, they will always be the same 22 00:01:20,000 --> 00:01:22,050 ‫So you can actually read them to memory 23 00:01:22,050 --> 00:01:25,280 ‫right in the beginning when we start the application. 24 00:01:25,280 --> 00:01:28,270 ‫And then, when necessary, we simply go ahead 25 00:01:28,270 --> 00:01:31,460 ‫and replace the contents in there. 26 00:01:31,460 --> 00:01:34,156 ‫Okay, so just like we did with the data here, 27 00:01:34,156 --> 00:01:36,720 ‫there's also no need to read the data 28 00:01:36,720 --> 00:01:38,528 ‫each time there is a request 29 00:01:38,528 --> 00:01:41,403 ‫and the same happens for the templates. 30 00:01:42,240 --> 00:01:43,120 ‫Okay? 31 00:01:43,120 --> 00:01:44,510 ‫So I'm actually going to to ahead 32 00:01:44,510 --> 00:01:47,090 ‫and do it for all three templates here 33 00:01:47,090 --> 00:01:49,260 ‫so we have that out of the way. 34 00:01:49,260 --> 00:01:54,260 ‫So I'm gonna go ahead, and just to get this one, call it 35 00:01:55,610 --> 00:01:57,040 ‫temp for template 36 00:01:59,000 --> 00:02:02,490 ‫overview, and DAR name 37 00:02:03,670 --> 00:02:05,743 ‫and here we have templates. 38 00:02:09,370 --> 00:02:13,213 ‫And then /template-overview. 39 00:02:15,460 --> 00:02:18,390 ‫Okay, then duplicate this here twice 40 00:02:19,510 --> 00:02:20,650 ‫so we have one 41 00:02:22,320 --> 00:02:24,683 ‫for the card, so template-card, 42 00:02:26,980 --> 00:02:29,983 ‫and then one for template product. 43 00:02:35,460 --> 00:02:37,780 ‫Product, alright. 44 00:02:37,780 --> 00:02:39,870 ‫And again, keep in mind that we can do 45 00:02:39,870 --> 00:02:42,380 ‫with the synchronized version because 46 00:02:42,380 --> 00:02:43,950 ‫we are in the top level code. 47 00:02:43,950 --> 00:02:47,400 ‫We just only executed once, right at the beginning 48 00:02:47,400 --> 00:02:50,080 ‫when we load up these applications. 49 00:02:50,080 --> 00:02:53,156 ‫So we could not do this inside of this 50 00:02:53,156 --> 00:02:55,970 ‫createServer callback function, okay? 51 00:02:55,970 --> 00:02:59,350 ‫Because this one is called each time there is a request. 52 00:02:59,350 --> 00:03:03,047 ‫And if we have one million requests at the same time, 53 00:03:03,047 --> 00:03:06,330 ‫then we could block the code one million times, 54 00:03:06,330 --> 00:03:08,040 ‫once for each request. 55 00:03:08,040 --> 00:03:11,450 ‫And that is something that we do not want. 56 00:03:11,450 --> 00:03:14,580 ‫So, the overview, let's actually go ahead 57 00:03:14,580 --> 00:03:16,740 ‫and first of all just to test it, 58 00:03:16,740 --> 00:03:21,010 ‫send this tempOverview as the response. 59 00:03:21,010 --> 00:03:22,120 ‫Now, before we can do that, 60 00:03:22,120 --> 00:03:26,853 ‫we need to go ahead and set this content type to HTML. 61 00:03:27,740 --> 00:03:30,453 ‫So let me actually copy this piece of code here. 62 00:03:32,400 --> 00:03:34,120 ‫So the status code is 200 63 00:03:34,120 --> 00:03:37,063 ‫and content type should be text/html. 64 00:03:42,250 --> 00:03:44,040 ‫So restart the server here 65 00:03:45,010 --> 00:03:47,943 ‫and let's now take a look, 66 00:03:49,070 --> 00:03:50,670 ‫and indeed, here we go. 67 00:03:50,670 --> 00:03:52,650 ‫So here's our styled page 68 00:03:53,710 --> 00:03:56,700 ‫that we already know from this one. 69 00:03:56,700 --> 00:03:58,630 ‫Now what's of course missing here 70 00:03:58,630 --> 00:04:01,031 ‫is these rows, and that's because 71 00:04:01,031 --> 00:04:03,770 ‫we still have our placeholder. 72 00:04:03,770 --> 00:04:08,110 ‫And so the next task is to now replace this placeholder 73 00:04:08,110 --> 00:04:09,293 ‫with the actual cards. 74 00:04:10,830 --> 00:04:12,560 ‫And how will we do that? 75 00:04:12,560 --> 00:04:15,640 ‫Well, remember that in data object, 76 00:04:15,640 --> 00:04:19,010 ‫we have an array of all the objects 77 00:04:19,010 --> 00:04:20,573 ‫that are in data.JSON. 78 00:04:21,620 --> 00:04:26,560 ‫So, all of these five objects, all in JavaScript objects, 79 00:04:26,560 --> 00:04:31,000 ‫because we already parsed this data with just a string. 80 00:04:31,000 --> 00:04:31,833 ‫Okay? 81 00:04:31,833 --> 00:04:34,150 ‫So data object again is an array of 82 00:04:34,150 --> 00:04:36,450 ‫at this point, five objects. 83 00:04:36,450 --> 00:04:37,790 ‫So what we have to do is 84 00:04:37,790 --> 00:04:40,192 ‫to basically loop through this array, 85 00:04:40,192 --> 00:04:42,977 ‫and for each of them, replace the placeholders 86 00:04:42,977 --> 00:04:45,770 ‫in the template with the actual data 87 00:04:45,770 --> 00:04:48,500 ‫from the current product, okay? 88 00:04:48,500 --> 00:04:49,333 ‫Make sense? 89 00:04:50,210 --> 00:04:53,533 ‫So, let's put that in code. 90 00:04:54,740 --> 00:04:59,740 ‫So data object, we're gonna loop through it with a map 91 00:05:00,160 --> 00:05:02,930 ‫because we want to return something 92 00:05:02,930 --> 00:05:06,243 ‫and that something, we will save into a new array, 93 00:05:08,060 --> 00:05:11,637 ‫so let's call that one the cardsHtml, 94 00:05:16,210 --> 00:05:17,140 ‫Okay? 95 00:05:17,140 --> 00:05:22,140 ‫And so I'm sure you are familiar with the map method, okay? 96 00:05:22,570 --> 00:05:26,147 ‫So what map does is accepts a callback function 97 00:05:26,147 --> 00:05:30,290 ‫and this callback function gets as an argument 98 00:05:30,290 --> 00:05:34,500 ‫the current element, so the element of the current loop 99 00:05:34,500 --> 00:05:36,423 ‫and whatever we return here 100 00:05:36,423 --> 00:05:39,880 ‫will then be saved into an array, okay? 101 00:05:39,880 --> 00:05:44,240 ‫So let's say we're looping over an array with five elements 102 00:05:44,240 --> 00:05:45,434 ‫which is the case here, 103 00:05:45,434 --> 00:05:48,074 ‫and for each element, we will return something, 104 00:05:48,074 --> 00:05:51,851 ‫and that something will then be put into the same position 105 00:05:51,851 --> 00:05:55,990 ‫but in this new cardsHtml array. 106 00:05:55,990 --> 00:05:59,970 ‫So, what will we do in each of these iterations? 107 00:05:59,970 --> 00:06:03,048 ‫Well, we want to replace the placeholders, right? 108 00:06:03,048 --> 00:06:05,200 ‫And so I'm actually gonna go ahead 109 00:06:05,200 --> 00:06:06,843 ‫and create a function for that 110 00:06:06,843 --> 00:06:09,787 ‫and that will be called replaceTemplate. 111 00:06:13,881 --> 00:06:14,844 ‫Okay? 112 00:06:14,844 --> 00:06:18,761 ‫And replaceTemplate will take in the card HTML. 113 00:06:19,820 --> 00:06:22,203 ‫So basically, the tempCard. 114 00:06:24,890 --> 00:06:28,713 ‫And it will take in the current object, so element. 115 00:06:29,660 --> 00:06:30,493 ‫Okay? 116 00:06:30,493 --> 00:06:33,703 ‫So this element is what holds the data, right? 117 00:06:34,900 --> 00:06:38,511 ‫So again, each of these is now an object 118 00:06:38,511 --> 00:06:42,423 ‫which contains the data in each of these properties. 119 00:06:44,070 --> 00:06:44,903 ‫Okay? 120 00:06:44,903 --> 00:06:49,430 ‫And don't worry, if it doesn't make 100% sense now, 121 00:06:49,430 --> 00:06:54,130 ‫it will once we create this replaceTemplate function, okay? 122 00:06:54,130 --> 00:06:56,993 ‫So let's now actually do that up here as well. 123 00:06:59,610 --> 00:07:03,100 ‫So replaceTemplate is a function 124 00:07:03,100 --> 00:07:07,420 ‫which takes in a template, just gonna call it temp here 125 00:07:07,420 --> 00:07:09,673 ‫and of course a product. 126 00:07:12,690 --> 00:07:13,523 ‫Alright. 127 00:07:15,780 --> 00:07:18,520 ‫So let's create a variable called output 128 00:07:19,500 --> 00:07:21,350 ‫and that one will be 129 00:07:22,510 --> 00:07:27,510 ‫template.replace in our placeholder. 130 00:07:29,620 --> 00:07:32,810 ‫And we're gonna put here all of the placeholders 131 00:07:32,810 --> 00:07:36,343 ‫that we have, starting with PRODUCTNAME, okay? 132 00:07:39,130 --> 00:07:43,963 ‫And so that one will be replaced with product.PRODUCTNAME. 133 00:07:45,230 --> 00:07:48,300 ‫So product, which is this argument 134 00:07:48,300 --> 00:07:50,997 ‫that we passed into the function, .PRODUCTNAME 135 00:07:52,300 --> 00:07:54,890 ‫because, well, that's the name of the field 136 00:07:54,890 --> 00:07:57,350 ‫where the product name is. 137 00:07:57,350 --> 00:07:58,250 ‫Alright? 138 00:07:58,250 --> 00:08:02,160 ‫So, go ahead and copy that one, and alright. 139 00:08:02,160 --> 00:08:05,014 ‫Now one small trick that we have to use here 140 00:08:05,014 --> 00:08:08,150 ‫is to actually not use the quotes, 141 00:08:08,150 --> 00:08:11,730 ‫but instead use a regular expression. 142 00:08:11,730 --> 00:08:13,380 ‫And that's because there might be 143 00:08:13,380 --> 00:08:16,517 ‫multiple instances of this placeholder 144 00:08:16,517 --> 00:08:21,517 ‫and so the trick is to wrap this in a regular expression 145 00:08:22,660 --> 00:08:24,940 ‫and use the g-flag then on it. 146 00:08:24,940 --> 00:08:27,010 ‫Which means global and so this will make it 147 00:08:27,010 --> 00:08:31,920 ‫so that all of these placeholders will get replaced 148 00:08:31,920 --> 00:08:34,530 ‫and not just the first one that occurs. 149 00:08:34,530 --> 00:08:36,910 ‫So this replaces the product name, 150 00:08:36,910 --> 00:08:39,663 ‫now let's go ahead and replace all the other one. 151 00:08:41,050 --> 00:08:42,473 ‫So output = 152 00:08:44,250 --> 00:08:48,140 ‫output.replace, 153 00:08:48,140 --> 00:08:49,900 ‫and now we'll just go ahead 154 00:08:49,900 --> 00:08:54,900 ‫and copy this to make my life a bit easier. 155 00:08:56,360 --> 00:08:59,990 ‫So image, and it is called image 156 00:09:01,538 --> 00:09:04,863 ‫and not in uppercase, so just like this. 157 00:09:06,000 --> 00:09:07,020 ‫Okay? 158 00:09:07,020 --> 00:09:09,070 ‫Now up here, I created this variable 159 00:09:09,070 --> 00:09:13,520 ‫because I wanted to replaced this product name in temp. 160 00:09:13,520 --> 00:09:16,785 ‫So in the argument, and it's not a good practice to 161 00:09:16,785 --> 00:09:19,760 ‫directly manipulate the arguments 162 00:09:19,760 --> 00:09:21,760 ‫that we pass into a function. 163 00:09:21,760 --> 00:09:24,180 ‫And so I created a new variable 164 00:09:24,180 --> 00:09:25,750 ‫and from now on, I will then 165 00:09:25,750 --> 00:09:29,100 ‫manipulate that first one, okay? 166 00:09:29,100 --> 00:09:31,820 ‫And so that's why it's not a const, but a let. 167 00:09:31,820 --> 00:09:35,424 ‫So a let, we can mutate after it's been created, okay? 168 00:09:35,424 --> 00:09:37,874 ‫Now let me just go ahead, copy a couple of these. 169 00:09:40,720 --> 00:09:44,930 ‫So price, and it's called price here as well, 170 00:09:44,930 --> 00:09:46,653 ‫then we have from, 171 00:09:50,790 --> 00:09:52,613 ‫then we have nutrients. 172 00:09:58,500 --> 00:10:00,290 ‫Of course I could copy all of this, 173 00:10:00,290 --> 00:10:02,853 ‫but I'm not gonna jump back and forth here. 174 00:10:06,930 --> 00:10:08,033 ‫So quantity, 175 00:10:13,674 --> 00:10:14,703 ‫description, 176 00:10:17,200 --> 00:10:19,990 ‫and I'm probably gonna do some mistake here 177 00:10:19,990 --> 00:10:22,370 ‫by writing all of this out manually 178 00:10:23,410 --> 00:10:26,920 ‫but in a small product, that is no big deal at all. 179 00:10:26,920 --> 00:10:29,470 ‫So actually this one we don't need, 180 00:10:29,470 --> 00:10:30,950 ‫or actually we do need 181 00:10:30,950 --> 00:10:33,120 ‫because for the organic, 182 00:10:33,120 --> 00:10:34,830 ‫so the organic that's missing, 183 00:10:34,830 --> 00:10:37,870 ‫but remember the organic was a bit special. 184 00:10:37,870 --> 00:10:41,743 ‫So in this case, if product is not organic, 185 00:10:42,900 --> 00:10:44,890 ‫so product.organic, 186 00:10:44,890 --> 00:10:45,883 ‫if it's false, 187 00:10:47,450 --> 00:10:50,510 ‫so remember, that is actually a bolding. 188 00:10:50,510 --> 00:10:53,130 ‫So for example, we have organic true here, 189 00:10:53,130 --> 00:10:55,180 ‫but we have false here. 190 00:10:55,180 --> 00:10:56,013 ‫Okay? 191 00:10:56,013 --> 00:10:59,470 ‫And so if it is false, well in that case, 192 00:10:59,470 --> 00:11:03,273 ‫we then want to replace the NOT.ORGANIC. 193 00:11:08,340 --> 00:11:13,340 ‫So the NOT.ORGANIC placeholder with simply not-organic. 194 00:11:17,630 --> 00:11:20,160 ‫So not-organic because this is 195 00:11:20,160 --> 00:11:22,313 ‫the class name that I showed you earlier. 196 00:11:24,070 --> 00:11:25,730 ‫So, 197 00:11:25,730 --> 00:11:27,320 ‫it is 198 00:11:27,320 --> 00:11:28,153 ‫this one. 199 00:11:29,500 --> 00:11:30,520 ‫Okay? 200 00:11:30,520 --> 00:11:35,100 ‫So it will then be replaced here, okay? 201 00:11:35,100 --> 00:11:37,350 ‫And so again, in case it's not organic, 202 00:11:37,350 --> 00:11:39,797 ‫well, then the class name NOT_ORGANIC will be here 203 00:11:39,797 --> 00:11:44,043 ‫and this entire batch will then be not displaced. 204 00:11:46,010 --> 00:11:47,623 ‫Alright, make sense? 205 00:11:48,490 --> 00:11:49,760 ‫So, 206 00:11:49,760 --> 00:11:52,410 ‫let's see if it w-- 207 00:11:52,410 --> 00:11:53,410 ‫ah, sorry, 208 00:11:53,410 --> 00:11:55,143 ‫the actual code is below it. 209 00:11:56,240 --> 00:11:59,890 ‫So let's try to make more sense of it. 210 00:11:59,890 --> 00:12:03,910 ‫So again, we loop over this data object already here 211 00:12:03,910 --> 00:12:06,840 ‫which holds all the products 212 00:12:06,840 --> 00:12:10,095 ‫and in each iteration, we will replace the placeholders 213 00:12:10,095 --> 00:12:13,890 ‫in the template card with the current product 214 00:12:13,890 --> 00:12:16,236 ‫which is element, right? 215 00:12:16,236 --> 00:12:20,580 ‫And this arrow function will then implicitly return it here. 216 00:12:20,580 --> 00:12:24,150 ‫So it's the same as having return here, okay? 217 00:12:24,150 --> 00:12:26,130 ‫But it's not really necessary because 218 00:12:26,130 --> 00:12:29,341 ‫in a arrow function, if you don't have the curly braces 219 00:12:29,341 --> 00:12:32,934 ‫this value here automatically gets returned. 220 00:12:32,934 --> 00:12:35,782 ‫Okay, so just in case you didn't know that, 221 00:12:35,782 --> 00:12:40,782 ‫I just remembered that we forgot to actually 222 00:12:41,210 --> 00:12:43,383 ‫return the output from here. 223 00:12:45,360 --> 00:12:46,193 ‫Okay? 224 00:12:46,193 --> 00:12:49,870 ‫So of course, we input the template and the product, 225 00:12:49,870 --> 00:12:53,533 ‫but then of course we have to output the final HTML. 226 00:12:54,700 --> 00:12:55,533 ‫Right? 227 00:12:55,533 --> 00:12:58,640 ‫And so that then gets plugged in in here, 228 00:12:58,640 --> 00:13:01,420 ‫and so then finally, all of this here 229 00:13:01,420 --> 00:13:05,850 ‫will replace an array, with the five final HTML's, 230 00:13:05,850 --> 00:13:08,090 ‫each for one of the five cards. 231 00:13:08,090 --> 00:13:12,580 ‫So, each for one of the five products, alright? 232 00:13:12,580 --> 00:13:16,380 ‫Now let's actually go ahead and log this to the console 233 00:13:16,380 --> 00:13:21,010 ‫before we put it on the overview webpage. 234 00:13:21,010 --> 00:13:25,433 ‫So cardsHtml just to make sure that everything works here. 235 00:13:28,090 --> 00:13:28,923 ‫Okay? 236 00:13:30,190 --> 00:13:32,853 ‫So we need to reload the server, don't forget that. 237 00:13:35,810 --> 00:13:37,370 ‫This all works the same, 238 00:13:37,370 --> 00:13:39,940 ‫but let's now take a look at the console. 239 00:13:39,940 --> 00:13:43,710 ‫And I'm starting to see nice things here. 240 00:13:43,710 --> 00:13:45,500 ‫So we have an array, 241 00:13:45,500 --> 00:13:48,350 ‫and we actually have the stuff replaced. 242 00:13:48,350 --> 00:13:50,170 ‫So we have some avocados here. 243 00:13:50,170 --> 00:13:52,720 ‫It says here FreshAvocados. 244 00:13:52,720 --> 00:13:55,773 ‫It has the four avocados per box, the price, 245 00:13:57,020 --> 00:13:59,940 ‫and so yeah, 246 00:13:59,940 --> 00:14:02,500 ‫that actually all looks very nice. 247 00:14:02,500 --> 00:14:03,840 ‫And indeed it's also an array. 248 00:14:03,840 --> 00:14:05,860 ‫So we have this first figure, 249 00:14:05,860 --> 00:14:09,140 ‫then a comma and so here starts the next element 250 00:14:09,140 --> 00:14:12,380 ‫so the next figure, alright? 251 00:14:12,380 --> 00:14:15,920 ‫So we have right now an array of all these elements 252 00:14:15,920 --> 00:14:18,880 ‫but what we want is actually not an array 253 00:14:18,880 --> 00:14:22,273 ‫but we want one big string containing all of this HTML. 254 00:14:24,250 --> 00:14:27,020 ‫So, that's actually very simple to achieve. 255 00:14:27,020 --> 00:14:30,910 ‫All we have to do is at the end of this array, 256 00:14:30,910 --> 00:14:33,290 ‫so we remember all of this here 257 00:14:33,290 --> 00:14:36,283 ‫returns this array that we see down here, 258 00:14:37,550 --> 00:14:39,600 ‫and so at the end all we do 259 00:14:39,600 --> 00:14:42,520 ‫is join by an empty string, 260 00:14:42,520 --> 00:14:46,080 ‫and so this will join all of these elements into a string. 261 00:14:46,080 --> 00:14:50,310 ‫And so now cardsHtml is truly a string. 262 00:14:50,310 --> 00:14:51,143 ‫Okay? 263 00:14:51,143 --> 00:14:54,070 ‫And so now we have our cards ready 264 00:14:54,070 --> 00:14:56,790 ‫and the last piece of the puzzle 265 00:14:56,790 --> 00:15:00,740 ‫is to go ahead and replace that placeholder. 266 00:15:00,740 --> 00:15:04,110 ‫So this here, actually copying it now, 267 00:15:04,110 --> 00:15:06,401 ‫so now replacing this placeholder 268 00:15:06,401 --> 00:15:09,413 ‫with the HTML that we just created. 269 00:15:11,050 --> 00:15:12,830 ‫So let's call it output here 270 00:15:13,760 --> 00:15:15,150 ‫and all we have to do 271 00:15:15,150 --> 00:15:16,343 ‫is tempOverview 272 00:15:18,060 --> 00:15:22,423 ‫with just a string that holds the overview HTML, right? 273 00:15:24,156 --> 00:15:25,553 ‫.replace, 274 00:15:27,330 --> 00:15:30,253 ‫and replace it with cardsHtml. 275 00:15:32,490 --> 00:15:33,750 ‫Alright? 276 00:15:33,750 --> 00:15:34,583 ‫That's it. 277 00:15:34,583 --> 00:15:38,620 ‫Now all we have to do is to actually respond with the output 278 00:15:38,620 --> 00:15:41,933 ‫and not with whatever we had before. 279 00:15:43,380 --> 00:15:44,730 ‫Okay, cool. 280 00:15:44,730 --> 00:15:46,760 ‫So that looked a bit complex, 281 00:15:46,760 --> 00:15:48,430 ‫but if you think about it, 282 00:15:48,430 --> 00:15:51,563 ‫I hope that it makes complete sense to you. 283 00:15:52,920 --> 00:15:55,200 ‫And so let's go ahead and test this now 284 00:15:56,040 --> 00:15:58,395 ‫and I hope I have no mistakes 285 00:15:58,395 --> 00:16:02,290 ‫and something went wrong, alright. 286 00:16:02,290 --> 00:16:03,670 ‫So what's that? 287 00:16:03,670 --> 00:16:07,000 ‫Okay, so I just misspelled replace. 288 00:16:07,000 --> 00:16:10,863 ‫That's one of the most common errors I get all the time. 289 00:16:12,310 --> 00:16:15,003 ‫Like some small spelling mistake. 290 00:16:16,060 --> 00:16:18,740 ‫Reload and bam, here we go. 291 00:16:18,740 --> 00:16:22,670 ‫So here are our five rows. 292 00:16:22,670 --> 00:16:24,902 ‫So beautiful, beautiful, beautiful. 293 00:16:24,902 --> 00:16:29,902 ‫Now it doesn't quite look like the original one 294 00:16:30,050 --> 00:16:35,050 ‫because what's missing is like these, this organic here. 295 00:16:36,190 --> 00:16:37,023 ‫Okay? 296 00:16:37,023 --> 00:16:40,070 ‫So let's see what's wrong there. 297 00:16:40,070 --> 00:16:44,570 ‫Also for some reason, I don't see the quantity here 298 00:16:44,570 --> 00:16:48,300 ‫but only if it's not organic. 299 00:16:48,300 --> 00:16:49,371 ‫Well that's weird, 300 00:16:49,371 --> 00:16:53,420 ‫so let's try to investigate what is happening here. 301 00:16:53,420 --> 00:16:55,620 ‫So the error is probably somewhere here 302 00:16:55,620 --> 00:16:58,820 ‫in this replaceTemplate function. 303 00:16:58,820 --> 00:17:02,210 ‫But actually, everything looks kind of correct here. 304 00:17:02,210 --> 00:17:06,293 ‫So also here on this not organic replacement. 305 00:17:07,220 --> 00:17:09,890 ‫So let's take a look at our template card 306 00:17:11,410 --> 00:17:12,243 ‫and, 307 00:17:13,890 --> 00:17:17,830 ‫so I see here that when there's this NOT_ORGANIC, 308 00:17:17,830 --> 00:17:20,550 ‫well, actually this entire box here, 309 00:17:20,550 --> 00:17:21,690 ‫so also this H6 310 00:17:25,330 --> 00:17:26,783 ‫will not be visible anymore. 311 00:17:27,910 --> 00:17:30,980 ‫So something looks wrong here, 312 00:17:30,980 --> 00:17:33,080 ‫let's take a look at the original one 313 00:17:34,870 --> 00:17:37,183 ‫just to inspect the HTML here. 314 00:17:39,730 --> 00:17:43,330 ‫So card detail is this one 315 00:17:43,330 --> 00:17:45,150 ‫and so we, yeah, 316 00:17:45,150 --> 00:17:48,630 ‫so we actually have three card details here 317 00:17:48,630 --> 00:17:51,773 ‫while in the template, we only have one, okay? 318 00:17:52,670 --> 00:17:56,270 ‫So let's go ahead and copy this one. 319 00:17:56,270 --> 00:17:59,160 ‫So in the details you can actually copy an element 320 00:18:00,410 --> 00:18:01,260 ‫and it will then, 321 00:18:03,300 --> 00:18:06,283 ‫well just like that, copy the entire element. 322 00:18:07,400 --> 00:18:11,053 ‫So this is what it's supposed to look like. 323 00:18:13,220 --> 00:18:14,840 ‫And so here it should say organic 324 00:18:14,840 --> 00:18:18,193 ‫and not quantity per box, okay? 325 00:18:18,193 --> 00:18:20,263 ‫That one is probably the next one. 326 00:18:27,780 --> 00:18:29,193 ‫So, 327 00:18:30,730 --> 00:18:32,290 ‫let's quickly fix that. 328 00:18:32,290 --> 00:18:35,760 ‫And here, of course we do not want that, 329 00:18:35,760 --> 00:18:38,920 ‫and so yeah, that looks better, 330 00:18:38,920 --> 00:18:41,763 ‫close it up, restart the server, 331 00:18:43,850 --> 00:18:48,143 ‫and let's check that one out again. 332 00:18:49,550 --> 00:18:51,660 ‫And now, bam, here we go. 333 00:18:51,660 --> 00:18:56,660 ‫So now it's working and indeed, it works exactly the same. 334 00:18:57,150 --> 00:18:58,370 ‫Beautiful. 335 00:18:58,370 --> 00:19:01,070 ‫So that is, that is really nice. 336 00:19:01,070 --> 00:19:06,070 ‫Let's just go ahead and delete, for example, the avocados 337 00:19:06,990 --> 00:19:08,680 ‫just to see what happens. 338 00:19:08,680 --> 00:19:13,680 ‫I'm just gonna do control, X to cut it, 339 00:19:13,900 --> 00:19:17,410 ‫reload it here, and it's not changing 340 00:19:17,410 --> 00:19:20,040 ‫and that's of course because remember 341 00:19:20,890 --> 00:19:21,723 ‫that 342 00:19:22,770 --> 00:19:24,420 ‫this, this data 343 00:19:24,420 --> 00:19:26,990 ‫is actually only read in the beginning 344 00:19:26,990 --> 00:19:30,490 ‫when we start the app, okay? 345 00:19:30,490 --> 00:19:32,250 ‫So in order for this to take effect, 346 00:19:32,250 --> 00:19:36,635 ‫we do effectively need to restart the application. 347 00:19:36,635 --> 00:19:38,853 ‫Okay, so no big deal. 348 00:19:40,760 --> 00:19:43,200 ‫And now it's gone, okay? 349 00:19:43,200 --> 00:19:45,900 ‫Because it's no longer in the JSON file 350 00:19:45,900 --> 00:19:47,920 ‫that it's read at the point of time 351 00:19:47,920 --> 00:19:49,630 ‫when we start the application 352 00:19:52,050 --> 00:19:52,883 ‫Okay? 353 00:19:52,883 --> 00:19:57,563 ‫Let's put it back here, give it a save, restart, 354 00:19:58,450 --> 00:20:02,630 ‫open this guy up, reload, and here it's back. 355 00:20:02,630 --> 00:20:05,580 ‫So it's now really working dynamically 356 00:20:05,580 --> 00:20:09,660 ‫by reading all this data right from the JSON file. 357 00:20:09,660 --> 00:20:12,860 ‫So this one works, let's check the links also 358 00:20:12,860 --> 00:20:15,810 ‫down there in the left-hand, bottom corner. 359 00:20:15,810 --> 00:20:18,600 ‫You see that the ID changes from zero, one 360 00:20:18,600 --> 00:20:20,750 ‫to, and so on and so forth, 361 00:20:20,750 --> 00:20:22,320 ‫but if I click this here, 362 00:20:22,320 --> 00:20:25,310 ‫well, when we get Page not found. 363 00:20:25,310 --> 00:20:29,170 ‫And that's because our route is not yet ready for this. 364 00:20:29,170 --> 00:20:30,010 ‫Okay? 365 00:20:30,010 --> 00:20:33,320 ‫And so let's actually do that in the next video 366 00:20:33,320 --> 00:20:35,780 ‫and implement the product detail page 367 00:20:35,780 --> 00:20:37,200 ‫for each of these products. 368 00:20:37,200 --> 00:20:39,993 ‫So, don't wait and let's move on now.