Table of contents
My goal is to seamlessly integrate this newfound backend expertise with my frontend skills, ultimately realizing my vision of becoming a well-rounded MERN stack developer. Lets Goooo💪🏼🚀
Fundamentals of Node JS
Transforming Json data into HTML
In out app.js file, we have the expression below. 👇🏼
We are reading the product.json file inside the data folder and we are converting the Json objects into a JavaScript objects by using the parse() method. We assigned the JavaScript objects to the products variable. From out previous lesson, we logged the products variable in the console and noticed that a JavaScript array was logged to the console and inside the array we have the Json objects as JavaScript objects. Each object represents a product and we want to display each product as a response to our web page whenever the use navigates to "/products" route.
Currently, the product page is showing 👇🏼
But instead of showing the above response, we want to display the product list as the response.
Lets update our code base:
- Inside the template folder, Create a products-list.html file and write some HTML codes. 👇🏼
Lets create a new variable productListHtml and we'll use the FS module readFileSync() to read the html file. 👇🏼
The productListHtml variable is going to store the HTML content of products-list.html file. Lets update the home page with the productListHtml as a response to see how it displays on the page.👇🏼
The web pages displays 👇🏼
The above response was basically hard coded into the products-list.html file.
Ignore the style, that is not the focus for now 🤣
Instead of using the hard coded value, we want to use the properties of our product object. We will use placeholders👇🏼
But what we really want is to loop through the products array and display each property of the products object. For iteration, we want to replace each placeholder with the properties of that product object
On the product array, we can use the map() method to loop through the list of products. The map() method receives a callback function and inside the callback function lets create a variable output and assign productListHtml. We use the replace() method to replace some placeholders by passing the values which we want to replace. In the output variable, we'll still have the same HTML but we'll replace the placeholders. 👇🏼
Once the map() method has finished iterating through the products, it's going to return a new array with the transformed data. Lets store the new transformed array inside a variable. 👇🏼
On the if/else block of the "/products" route, lest log productHtmlArray to the console and see the output. 👇🏼
From the output on the terminal you can see that we have an array because it begins with an opening square bracket with strings of HTML contents.👇🏼
Now we want to join all the elements we're receiving into a single value. To That we use the join() method, passing the separator or delimiter as the first argument, in our case the comma "," is the separator. See the code below for clarity. 👇🏼
And now we're getting an HTML content. Basically all the elements of the array have been combined to a single HTML content. 👇🏼
We want to send this HTML content as a response for the products page.
Lets update our code base for the "/products" route. 👇🏼
We created a variable to replace the html placeholder with productHtmlArray.join(",").
And here we get a response 👇🏼
Working perfectly👏🏽👏🏽👏🏽
In summary, we transformed the Json data into a JavaScript object and then display as a response to the web page.
Next: Parsing Query String from URL.
See you soon😊🫡✌🏼...