Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a Simple Dynamic Site with Node.js!
You have completed Build a Simple Dynamic Site with Node.js!
Preview
We're reading the template files in. Now let's replace our {{placeholders}} with actual values.
Treehouse Videos
Node.js APIs Used
JavaScript Documentation
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We're getting so close now.
0:00
Our templates are being printed out and
our responses and
0:01
there's one last thing to do and that's to
replace the placeholders with actual data.
0:05
So, all we need to do is this one thing,
but
0:10
this is pretty much broken up into several
different bits.
0:13
So, I recommend creating a function if it
gets a little bit too complicated.
0:17
So up here, I'm gonna create a new
0:24
function called mergeValues.
0:28
And in there, we want to merge the values
with the content.
0:33
[BLANK_AUDIO]
0:37
So, it would look something like this, but
the fileContents
0:43
would equal the mergeValues of the values
and the fileContents.
0:48
So this looks a lot easier to read
0:54
because in here we'll need to do a couple
of things.
0:57
We need to cycle over
1:02
the keys of these values and
1:06
then we need to replace
1:11
all key with the values
1:16
from the values object.
1:21
So wherever we see an instance of the key,
we need to replace it
1:26
with the value that we've passed in, in
the values object.
1:31
So for an example, if we take a look at
our router again and
1:36
we look here is that we need to cycle over
all these keys,
1:42
which are the exact same keys in squiggly
brackets in our template.
1:47
And then grab the value and replace it, so
that's what that means there.
1:54
And then we want to return
2:00
the merged content.
2:07
So let's cycle over those keys, so
2:13
you can do for var key in values.
2:17
[BLANK_AUDIO]
2:21
So, in some older browsers, you won't be
able to do that.
2:26
Because we're doing JavaScript on the
server side,
2:29
we can do this and we can say, content is
equal to content.replace and
2:34
we want to replace the key with the values
and then key.
2:42
So you can programmatically access
adjacent dictionary in two different ways.
2:48
You can do values and if you know what the
key is like avatar URL,
2:53
for example, we could do that.
2:58
But because we're dynamically getting the
key's value from the values dictionary,
3:00
we can actually just programmatically
access it with the square brackets.
3:08
So this.
3:15
[BLANK_AUDIO]
3:17
Is the equivalent of.
3:22
[BLANK_AUDIO]
3:23
So these are two equivalent terms, but
because we don't know when we're cycling
3:31
over, which one it is apart from as a
string, we have to access it like that.
3:36
So we need to search the whole content of
the file for
3:41
the string of the key, which is avatar
URL, for
3:46
example, with the squiggly brackets either
side of it.
3:51
And then once we've done that, we can just
return the content.
3:57
[BLANK_AUDIO]
3:59
So we're modifying the string every time
we cycle over the keys.
4:04
So we've got the method code called here.
4:10
So, in theory, this should work.
4:13
So let's try it out.
4:15
[BLANK_AUDIO]
4:16
So page 3000, so the home page works fine.
4:24
Let's go to slash chalkers.
4:28
Okay.
So something's gone wrong,
4:34
let's take a look at our console.
4:36
So, it says this.
4:39
[NOISE] So when we call content.replace,
so
4:40
we're trying to call this string replace
on content.
4:44
But it's saying that the object, which
isn't the string,
4:50
doen' t have the replace method.
4:53
So something different is going on here.
4:55
So let's take a look in
4:59
the node documentation and
5:04
file system and then sync,
5:09
file read sync.
5:15
So, it saves.
5:19
If the encoding option is specified, then
this function returns a string.
5:22
But we haven't specified an encoding,
otherwise, it returns a buffer.
5:28
So what we're actually passing is not the
file content, it's a buffer.
5:31
So when we were passing the buffer, which
is the stream of data coming from the hard
5:36
drive and passing it into the response,
it's fine because a response is a buffer.
5:42
And when we write a string to it, it just
converts it to the buffer.
5:48
So, it sends that string of information as
a buffer to the response.
5:51
But since we want to manipulate it, we
need to convert the buffer,
5:57
the file buffer into a string, so we can
call the replace method on it.
6:02
So how do we get these encoding options?
6:07
So, at the end, there's a options array
and it says, encoding string.
6:09
So the universal encoding that we want
6:15
to use is utf8, so let's do that.
6:20
So, encoding is utf8 [SOUND] and
6:24
save and then let's run the console and
6:30
start it up again.
6:37
[BLANK_AUDIO]
6:40
Preview.
6:44
So the, the home page is still working and
6:46
when we get to chalkers, the body loads
and
6:50
then the div loads with my image URL and
it has my user name.
6:55
My number of badges and my JavaScript
points.
7:01
So now we've got our templates being
populated with user data, which is cool.
7:04
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up