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.