Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Build a Simple Dynamic Site with Node.js Creating a Basic Template Engine in Node.js Binding Values

23,470 Points

fileContents = mergeValues(values, fileContents) - means exactly what?


I'm having a hard time to understand what this line of code means:

fileContents = mergeValues(values, fileContents)

In this context:

function view(templateName, values, reponse) { //Read from the template file var fileContents = fs.readFileSync('./views/' + templateName + '.html', {encoding: "utf-8"}); //Insert values in to the content fileContents = mergeValues(values, fileContents); //Write out the contents to the response reponse.write(fileContents); }

Any help is greatly appreciated ! Thanks.

fileContents = mergeValues(values, fileContents).

To try and explain what the above means, I will break it down into smaller chunks.


var fileContents = fs.readFileSync('./views/' + templateName + '.html', {encoding: "utf-8"});

The line above is grabbing all of the .html files from the folder 'views' and then storing them in the variable 'fileContents'.

mergeValues(values, content) This is a function designed to cycle through all of the keys within this function's first 'values' argument. It then identifies any place-holder text, within the second argument of 'content', that looks like this: "{{" + key + "}}" e.g({{AvatarURL}}), and replaces it with the key's value in the 'values' argument. After it has done this, it then returns the 'content' variable as its final output.

Here is where things are going to start sounding a little complicated, but stick with it.

When the 'view' function is called, it takes three arguments: view(templateName, values, response);

'templateName' refers to the .html templates in the 'views' folder. 'values', in this case, refers to the values within the values object (i.e AvatarURL; badges; points...). 'response' is just a variable to hold what information the function returns. So now this function has the templates from the 'view' folder, the 'values' from the user's parsed JSON data, and the response that the function returns.

The 'view' function then initiates the fs.readFileSync, grabbing all of the .html files from the folder 'views' and then storing them in the variable 'fileContents'.

Now let's get down to brass tax.

'view()' then calls the 'mergeValues()' function.

'mergeValues(values, fileContents)' takes, for its first argument, the 'values' variable. 'values' is the data passed into the view() function's second argument which is then passed along and into 'mergeValues()' as its first argument. 'mergeValues()' then takes, as its second argument 'fileContents' which, as I have said previously, is all of the .html files in the 'views' folder. It then cycles through each of the .html files, finds any placeholder ({{ + key + }}) text and replaces it with the corresponding values in the 'values' variable. It then stores the outcome of this process back into the 'fileContents' variable, overwriting any previous information.

'fileContents' then gets passed into the 'view()' function's third argument, with the use of response.write. The 'response' variable is then ready for use within another outside function.

I hope that this has helped and hasn't just confused you a whole lot more. If there is anything that you don't understand about this answer, don't hesitate to get in touch.

Happy coding.

James Barrett
James Barrett
13,253 Points

Hi Daniel Thomas , thanks for the detailed answer. When you say ' grabbing all of the .html files from the folder 'views' ' - do you mean it's cycling through the .html files which are actually being passed into the view function? For example, if we go to the /username route, it's going to cycle through the 'profile.html' and the 'footer.html'.