I am currently expanding my expertise to encompass Node.js for server-side development. My focus includes mastering server architecture, databases, API development, and authentication mechanisms. Lets Goooo💪🏼🚀
Fundamentals of Node JS
Working with Json data
Create a new folder named data.
Inside the data folder, create a products.json file and add some Json objects. 👇🏼
Inside the Json data we have an array and inside the array we have some Json objects. In a real world application when we are fetching data from a database, we get the data as a Json object and then we'll have to transform the Json object to a JavaScript object to be able to work with it.
Returning a json data response
lets update our code base to return a Json response when we visit the products route. In other to do that we have to read the file using the readFile() method on the FS module. 👇🏼
In the header we have the statusCode as 200 and the "Content-type" : "application/json" because it's a Json file.
Restart the server and refresh the web page. 👇🏼
When creating a web application we do not send Json data in the response, we send the HTML data in the response but when creating a web API we send Json data instead. We are building a web application, so instead of sending a Json data, we want to send an HTML response. We want to display the data on our the web page, each Json object represents a product. To achieve this, we need to first convert the Json objects into a JavaScript object and to do that, we use a method called JSON.parse() which will receive the json data and covert it to a JavaScript object.
Let update our code base.👇🏼
Well there are some issues. If we use the above approach, for every new request, the readFile() method will read the file and that is not exactly what we want. If thousands of requests are made to the "/product" route, the readFile() method will have to read this products.json file a thousand times and its not the best approach.
Lets update the code base. 👇🏼
We created a variable products and we used the readFileSync() method which receives the path to our Json file to read the file only once upon the first request. The readFileSync() method will the read the data from the products.Json file and store the value in the products variable. And to use the Json data, we had to convert it to a JavaScript object using the JSON.parse() method.
And for our "/products" route, lets update the response and log the products to the console. 👇🏼
Lets check out the response on our web page. 👇🏼
And we also got the products response on the console. 👏🏽👇🏼
We get an array with the Json objects as it's element. Remember that for Json objects, both the keys and the values are wrapped in double quotes. i.e:"name": "APPLE iPhone SE" but in JavaScript objects we have the keys or property name without any double quotes. i.e:name: "APPLE iPhone SE" . The Json objects have been converted to JavaScript objects. And now that we have converted our products.json data into JavaScript objects we can now use it in our application and display the data in the web page.
Returning HTML response
Create a template folder
Create a styles folder & an index.html file inside the template folder
inside the styles folder, create a styles.css file. 👇🏼
Inside the index.html file, link your css and write some code.
Lets create some nav-links for easy route navigation and also add some styles. 👇🏼
The css styles will not apply automatically because in Node JS we cannot directly use static files. We are going to talk about static files later in this course but for i will just write all the styles inside the index.html files. 👇🏼
To display the html on the page, we have to send it as our response to the server. first we create an html variable to read the html file. i.e: const html = fs.readFileSync("./template/index.html", "utf-8"). The we pass it as a response to all our route URLs. 👇🏼
Lets see the display on the browser. 👇🏼
We see that all of the different routes are currently displaying same message "This is the home page" as response because it was hard coded into the index.html file as a sample text.
To display or show a dynamic message as a response for our different routes, in the index.html file, instead of hard coding a message, lets use a place holder. i.e.<p>{{%CONTENT%}}</p> so we can use it to display the response for our different routes.
In other to access the place holder, we'll use the replace() method. The replace() method takes two argument. For the first argument, we pass the place holder as a string replace("{{%CONTENT%}}") and for the second argument, we pass the message we want to display on the page as a string as well. i.e: replace("{{%CONTENT%}}", "This is the about page"). Lets update our code base to see the response for each dynamic route. 👇🏼
Lets checkout the web page to see the response👇🏼
Working perfectly👏🏽👏🏽👏🏽
In summary, for each of our dynamic routes, we are sending an HTML response. The index.html file is acting like the master page of our application. Basically, it is acting like a template and in that template we are simply replacing the placeholder <p>{{%CONTENT%}}</p> with the actual content which we want to send as the response for that particular page. And in our app.js file we are simply reading that HTML file and then based on the route, we are replacing the placeholder with the content which we want to display in the web page.
Next: Transforming Json data into HTML
See you soon😊🫡✌🏼...