1 00:00:00,477 --> 00:00:01,799 We're getting so close now. 2 00:00:01,799 --> 00:00:05,274 Our templates are being printed out and our responses and 3 00:00:05,274 --> 00:00:10,643 there's one last thing to do and that's to replace the placeholders with actual data. 4 00:00:10,643 --> 00:00:13,523 So, all we need to do is this one thing, but 5 00:00:13,523 --> 00:00:17,534 this is pretty much broken up into several different bits. 6 00:00:17,534 --> 00:00:24,083 So, I recommend creating a function if it gets a little bit too complicated. 7 00:00:24,083 --> 00:00:28,785 So up here, I'm gonna create a new 8 00:00:28,785 --> 00:00:33,172 function called mergeValues. 9 00:00:33,172 --> 00:00:37,438 And in there, we want to merge the values with the content. 10 00:00:37,438 --> 00:00:43,337 [BLANK_AUDIO] 11 00:00:43,337 --> 00:00:48,993 So, it would look something like this, but the fileContents 12 00:00:48,993 --> 00:00:54,995 would equal the mergeValues of the values and the fileContents. 13 00:00:54,995 --> 00:00:57,909 So this looks a lot easier to read 14 00:00:57,909 --> 00:01:02,056 because in here we'll need to do a couple of things. 15 00:01:02,056 --> 00:01:06,196 We need to cycle over 16 00:01:06,196 --> 00:01:11,799 the keys of these values and 17 00:01:11,799 --> 00:01:16,426 then we need to replace 18 00:01:16,426 --> 00:01:21,055 all key with the values 19 00:01:21,055 --> 00:01:26,182 from the values object. 20 00:01:26,182 --> 00:01:31,364 So wherever we see an instance of the key, we need to replace it 21 00:01:31,364 --> 00:01:36,464 with the value that we've passed in, in the values object. 22 00:01:36,464 --> 00:01:42,311 So for an example, if we take a look at our router again and 23 00:01:42,311 --> 00:01:47,597 we look here is that we need to cycle over all these keys, 24 00:01:47,597 --> 00:01:54,021 which are the exact same keys in squiggly brackets in our template. 25 00:01:54,021 --> 00:02:00,239 And then grab the value and replace it, so that's what that means there. 26 00:02:00,239 --> 00:02:07,202 And then we want to return 27 00:02:07,202 --> 00:02:13,177 the merged content. 28 00:02:13,177 --> 00:02:17,459 So let's cycle over those keys, so 29 00:02:17,459 --> 00:02:21,326 you can do for var key in values. 30 00:02:21,326 --> 00:02:26,478 [BLANK_AUDIO] 31 00:02:26,478 --> 00:02:29,155 So, in some older browsers, you won't be able to do that. 32 00:02:29,155 --> 00:02:34,833 Because we're doing JavaScript on the server side, 33 00:02:34,833 --> 00:02:42,275 we can do this and we can say, content is equal to content.replace and 34 00:02:42,275 --> 00:02:48,098 we want to replace the key with the values and then key. 35 00:02:48,098 --> 00:02:53,644 So you can programmatically access adjacent dictionary in two different ways. 36 00:02:53,644 --> 00:02:58,571 You can do values and if you know what the key is like avatar URL, 37 00:02:58,571 --> 00:03:00,918 for example, we could do that. 38 00:03:00,918 --> 00:03:08,913 But because we're dynamically getting the key's value from the values dictionary, 39 00:03:08,913 --> 00:03:15,936 we can actually just programmatically access it with the square brackets. 40 00:03:15,936 --> 00:03:17,515 So this. 41 00:03:17,515 --> 00:03:22,208 [BLANK_AUDIO] 42 00:03:22,208 --> 00:03:23,808 Is the equivalent of. 43 00:03:23,808 --> 00:03:31,263 [BLANK_AUDIO] 44 00:03:31,263 --> 00:03:36,469 So these are two equivalent terms, but because we don't know when we're cycling 45 00:03:36,469 --> 00:03:41,311 over, which one it is apart from as a string, we have to access it like that. 46 00:03:41,311 --> 00:03:46,458 So we need to search the whole content of the file for 47 00:03:46,458 --> 00:03:51,246 the string of the key, which is avatar URL, for 48 00:03:51,246 --> 00:03:57,011 example, with the squiggly brackets either side of it. 49 00:03:57,011 --> 00:03:59,795 And then once we've done that, we can just return the content. 50 00:03:59,795 --> 00:04:04,328 [BLANK_AUDIO] 51 00:04:04,328 --> 00:04:10,056 So we're modifying the string every time we cycle over the keys. 52 00:04:10,056 --> 00:04:13,778 So we've got the method code called here. 53 00:04:13,778 --> 00:04:15,869 So, in theory, this should work. 54 00:04:15,869 --> 00:04:16,978 So let's try it out. 55 00:04:16,978 --> 00:04:24,327 [BLANK_AUDIO] 56 00:04:24,327 --> 00:04:28,850 So page 3000, so the home page works fine. 57 00:04:28,850 --> 00:04:34,033 Let's go to slash chalkers. 58 00:04:34,033 --> 00:04:36,672 Okay. So something's gone wrong, 59 00:04:36,672 --> 00:04:39,366 let's take a look at our console. 60 00:04:39,366 --> 00:04:40,582 So, it says this. 61 00:04:40,582 --> 00:04:44,821 [NOISE] So when we call content.replace, so 62 00:04:44,821 --> 00:04:50,096 we're trying to call this string replace on content. 63 00:04:50,096 --> 00:04:53,615 But it's saying that the object, which isn't the string, 64 00:04:53,615 --> 00:04:55,621 doen' t have the replace method. 65 00:04:55,621 --> 00:04:59,269 So something different is going on here. 66 00:04:59,269 --> 00:05:04,029 So let's take a look in 67 00:05:04,029 --> 00:05:09,794 the node documentation and 68 00:05:09,794 --> 00:05:15,557 file system and then sync, 69 00:05:15,557 --> 00:05:19,076 file read sync. 70 00:05:19,076 --> 00:05:22,692 So, it saves. 71 00:05:22,692 --> 00:05:28,036 If the encoding option is specified, then this function returns a string. 72 00:05:28,036 --> 00:05:31,982 But we haven't specified an encoding, otherwise, it returns a buffer. 73 00:05:31,982 --> 00:05:36,675 So what we're actually passing is not the file content, it's a buffer. 74 00:05:36,675 --> 00:05:42,490 So when we were passing the buffer, which is the stream of data coming from the hard 75 00:05:42,490 --> 00:05:48,418 drive and passing it into the response, it's fine because a response is a buffer. 76 00:05:48,418 --> 00:05:51,885 And when we write a string to it, it just converts it to the buffer. 77 00:05:51,885 --> 00:05:57,922 So, it sends that string of information as a buffer to the response. 78 00:05:57,922 --> 00:06:02,499 But since we want to manipulate it, we need to convert the buffer, 79 00:06:02,499 --> 00:06:07,351 the file buffer into a string, so we can call the replace method on it. 80 00:06:07,351 --> 00:06:09,548 So how do we get these encoding options? 81 00:06:09,548 --> 00:06:15,148 So, at the end, there's a options array and it says, encoding string. 82 00:06:15,148 --> 00:06:20,089 So the universal encoding that we want 83 00:06:20,089 --> 00:06:24,216 to use is utf8, so let's do that. 84 00:06:24,216 --> 00:06:30,010 So, encoding is utf8 [SOUND] and 85 00:06:30,010 --> 00:06:37,093 save and then let's run the console and 86 00:06:37,093 --> 00:06:40,535 start it up again. 87 00:06:40,535 --> 00:06:44,183 [BLANK_AUDIO] 88 00:06:44,183 --> 00:06:46,455 Preview. 89 00:06:46,455 --> 00:06:50,805 So the, the home page is still working and 90 00:06:50,805 --> 00:06:55,279 when we get to chalkers, the body loads and 91 00:06:55,279 --> 00:07:01,387 then the div loads with my image URL and it has my user name. 92 00:07:01,387 --> 00:07:04,523 My number of badges and my JavaScript points. 93 00:07:04,523 --> 00:07:10,110 So now we've got our templates being populated with user data, which is cool.