Bummer! You have been redirected as the page you requested could not be found.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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