1 00:00:03,326 --> 00:00:05,426 So let's now inject some dynamic content 2 00:00:06,800 --> 00:00:09,101 and for that I want to start with a 3 00:00:09,101 --> 00:00:11,040 simple example before we work on the 4 00:00:11,040 --> 00:00:13,460 actual results that we want to achieve, 5 00:00:13,460 --> 00:00:15,700 which is that we output our restaurants, 6 00:00:15,700 --> 00:00:17,793 here on restaurants, EJS. 7 00:00:19,240 --> 00:00:21,750 for the moment here on restaurants, EJS, 8 00:00:21,750 --> 00:00:23,970 I'll add a new paragraph above of the 9 00:00:25,345 --> 00:00:27,004 restaurant list where 10 00:00:27,004 --> 00:00:30,540 I say we found, and then I want to say X restaurants. 11 00:00:30,540 --> 00:00:34,817 So the number of restaurants stored in this restaurants, 12 00:00:34,817 --> 00:00:35,650 Jason file. 13 00:00:36,750 --> 00:00:39,220 Now of course X should be dynamic. 14 00:00:39,220 --> 00:00:41,020 And that's exactly the kind of problem 15 00:00:41,020 --> 00:00:41,870 we couldn't solve 16 00:00:41,870 --> 00:00:45,560 before with just pre-written HTML. 17 00:00:45,560 --> 00:00:48,343 Because at the moment, of course, we only see X here. 18 00:00:49,660 --> 00:00:53,114 Now we can make that dynamic because we are now using a 19 00:00:53,114 --> 00:00:56,510 templating engine. And because we are in a template file, 20 00:00:56,510 --> 00:00:57,923 EJS file here. 21 00:00:59,955 --> 00:01:03,490 And now here, we can use a special EJS syntax, which, 22 00:01:03,490 --> 00:01:05,280 and that's really important is only 23 00:01:05,280 --> 00:01:08,180 available because we are in the EJS file. 24 00:01:08,180 --> 00:01:10,780 that will be parsed and converted by 25 00:01:10,780 --> 00:01:14,670 that EJS package we installed, now in here 26 00:01:14,670 --> 00:01:16,510 in that place where we want to 27 00:01:16,510 --> 00:01:18,410 output at dynamic value, 28 00:01:18,410 --> 00:01:22,653 we can write smaller than percentage equal, 29 00:01:25,880 --> 00:01:27,320 then any placeholder name, any 30 00:01:28,400 --> 00:01:29,233 variable name of your choice. 31 00:01:30,903 --> 00:01:32,600 Let's say, number of restaurants, 32 00:01:32,600 --> 00:01:34,710 I'll come back to that in a second. 33 00:01:34,710 --> 00:01:36,960 And then percentage that's greater than sign. 34 00:01:37,840 --> 00:01:40,490 So it looks a bit like an HTML tag, 35 00:01:40,490 --> 00:01:42,350 just with a different syntax, 36 00:01:42,350 --> 00:01:46,200 but we basically got an opening tag, and a closing tag. 37 00:01:46,200 --> 00:01:48,290 If you want to call it like this, 38 00:01:48,290 --> 00:01:51,440 please note that the opening tack has this equal sign. 39 00:01:51,440 --> 00:01:53,113 The closing tack doesn't have it. 40 00:01:54,050 --> 00:01:56,440 You'll also see that this is red here for me. 41 00:01:56,440 --> 00:02:00,010 The reason is that by default visual studio code doesn't 42 00:02:00,010 --> 00:02:03,070 understand this EJS syntax. 43 00:02:03,070 --> 00:02:06,540 So we don't get any IDE support for that. Instead, 44 00:02:06,540 --> 00:02:08,452 the opposite is the case. 45 00:02:08,452 --> 00:02:12,600 And my IDE thinks that I'm writing some weird code here. 46 00:02:12,600 --> 00:02:15,900 Maybe I'm trying to write an HTML element and I'm doing it 47 00:02:17,462 --> 00:02:18,295 wrong, 48 00:02:18,295 --> 00:02:21,480 but this will work because this overall file will be parsed 49 00:02:21,480 --> 00:02:23,200 by the EJS package. 50 00:02:23,200 --> 00:02:27,055 And this EJS package will look for this Syntex to then 51 00:02:27,055 --> 00:02:31,978 replace this placeholder with a concrete, value for that. 52 00:02:31,978 --> 00:02:35,880 We now need to pass in that concrete value though. 53 00:02:35,880 --> 00:02:39,610 When the restaurants EJS is rendered as a template, 54 00:02:39,610 --> 00:02:43,950 we need to make sure that this, variable is available 55 00:02:44,823 --> 00:02:46,860 during the renders cycle. So to say, 56 00:02:46,860 --> 00:02:49,761 and that's something we do in app JS. here, 57 00:02:49,761 --> 00:02:52,400 when rendering restaurants, 58 00:02:52,400 --> 00:02:55,640 we can pass a second parameter value to 59 00:02:55,640 --> 00:02:56,740 this render method, 60 00:02:56,740 --> 00:02:59,330 which is optional, but which is required. 61 00:02:59,330 --> 00:03:02,353 You do have some dynamic content in that template. 62 00:03:04,809 --> 00:03:06,483 Here, you can pass in a JavaScript object. 63 00:03:08,279 --> 00:03:11,450 And in that object, you specify any placeholder names, 64 00:03:11,450 --> 00:03:16,420 any variables you are referring to in the template as keys. 65 00:03:16,420 --> 00:03:17,560 So here in this object, 66 00:03:17,560 --> 00:03:21,395 I add number of restaurants because I'm using that key in my 67 00:03:21,395 --> 00:03:22,853 EJS file. 68 00:03:24,310 --> 00:03:26,350 And then we store a value in that key. 69 00:03:26,350 --> 00:03:29,383 And that's the value that will be output in the template. 70 00:03:30,380 --> 00:03:31,213 Now, here, 71 00:03:31,213 --> 00:03:33,540 I want to output the number of stored restaurants and for 72 00:03:33,540 --> 00:03:36,240 the moment, I'll just set this to two soon. 73 00:03:36,240 --> 00:03:39,193 We'll get the actual restaurants from the JS file, 74 00:03:40,560 --> 00:03:43,596 but to prove that this works, let's set it two, 75 00:03:43,596 --> 00:03:46,563 to save all files and then reload this page. 76 00:03:48,160 --> 00:03:49,370 And now you see two here. 77 00:03:49,370 --> 00:03:53,380 And if we inspect this in the browser, then we see here, 78 00:03:53,380 --> 00:03:57,510 it's two written like this here in the browser. 79 00:03:57,510 --> 00:04:01,812 We don't see this strange syntax which we have at the input 80 00:04:01,812 --> 00:04:04,740 EJS file because as I emphasized before, 81 00:04:04,740 --> 00:04:08,400 this file is parsed and rendered on the server. 82 00:04:08,400 --> 00:04:12,550 And only the finished HTML code is sent to the browser. 83 00:04:12,550 --> 00:04:15,763 So in the browser, we don't see any of that placeholder. 84 00:04:17,230 --> 00:04:21,350 but now we got away all for returning a standard HTML file 85 00:04:21,350 --> 00:04:25,490 with dynamic content. And that is something brand new, 86 00:04:25,490 --> 00:04:28,600 which we were not able to do before, In this course, 87 00:04:28,600 --> 00:04:32,150 now we made a huge step forward, because we're now fully 88 00:04:32,150 --> 00:04:34,230 utilizing this backend code. 89 00:04:34,230 --> 00:04:37,120 We don't just use it for storing user input, 90 00:04:37,120 --> 00:04:40,340 which was already a step forward before, 91 00:04:40,340 --> 00:04:45,150 but we now also use it to return dynamically generated HTML 92 00:04:46,185 --> 00:04:47,332 code. And that, 93 00:04:47,332 --> 00:04:49,930 and yet is one of the main reasons for writing your own 94 00:04:49,930 --> 00:04:53,440 service at code and for using a language like node with a 95 00:04:53,440 --> 00:04:55,103 library like express. 96 00:04:56,810 --> 00:04:58,600 So then, for now to round this off, 97 00:04:58,600 --> 00:05:02,020 let's get the actual number of restaurants. And for this, 98 00:05:02,020 --> 00:05:04,120 we need to, in the end, 99 00:05:04,120 --> 00:05:08,910 read our restaurant file and parse the stored restaurants. 100 00:05:08,910 --> 00:05:12,240 So I'll do what I also do here in slash recommend and the 101 00:05:14,419 --> 00:05:15,356 post route. 102 00:05:15,356 --> 00:05:18,590 I'll copy these free lines here and repeat that here. 103 00:05:19,970 --> 00:05:22,970 And then we got our stored restaurants and I want to use the 104 00:05:24,604 --> 00:05:26,065 length of that array, 105 00:05:26,065 --> 00:05:27,663 which it is as a value for number of restaurants. 106 00:05:29,023 --> 00:05:32,602 So here I'll set number of restaurants equal to stored 107 00:05:32,602 --> 00:05:36,173 restaurants dot length, whoops, dot length like this. 108 00:05:37,640 --> 00:05:40,230 We know that storage restaurants will be an array, 109 00:05:40,230 --> 00:05:43,480 so we can safely access that length to get the number of 110 00:05:43,480 --> 00:05:44,813 items in that array. 111 00:05:47,535 --> 00:05:48,770 And with that, if I reload, it's still too, 112 00:05:48,770 --> 00:05:51,703 because I got two restaurants, but of course, 113 00:05:54,104 --> 00:05:56,503 if I add a third restaurant restaurant free, awesome. 114 00:05:58,294 --> 00:05:59,767 Street, five, my city, 115 00:05:59,767 --> 00:06:04,767 and this is a good old German Christine, 116 00:06:05,007 --> 00:06:09,263 the URL is saw awesome.com. 117 00:06:10,625 --> 00:06:12,075 And here I say, it's amazing. 118 00:06:13,088 --> 00:06:16,000 All of course, if I shared this, this works. 119 00:06:16,000 --> 00:06:17,800 And if we en browse the restaurants, 120 00:06:18,855 --> 00:06:21,050 we now have three as a number here. 121 00:06:21,050 --> 00:06:24,063 So that's working and that's why we use a templating engine, 122 00:06:25,127 --> 00:06:27,133 but of course this engine can do more for us.