#16 Transforming JSON data into HTML | Fundamentals of NODE JS | A Complete NODE JS Course

Summary

In this lecture, the process of converting JSON data into a JavaScript object is demonstrated using Node.js. The instructor reads data from a JSON file, converts it into an array of JavaScript objects, and logs the data. They then explain how to display this data on a webpage by creating an HTML file and looping over the array to dynamically insert product details. The lesson concludes by addressing issues with rendering and properly setting content types to ensure the web page correctly displays the product information.

Takeaways

• 📥 The lecture demonstrates how to read JSON data and convert it into a JavaScript object using the `JSON.parse` method.
• 📂 The app reads from a `products.json` file and logs the JavaScript array formed from the JSON objects.
• 📝 A new HTML file `product_list.html` is created to display products dynamically on the web page.
• 🔄 Placeholders in the HTML file are used to replace hardcoded values with product data from the `products` array.
• 🔄 The map function is used in JavaScript to iterate over the `products` array and replace placeholders with the corresponding product properties.
• 💡 JavaScript's `replace` method is used to dynamically insert product data (like `name`, `model number`, etc.) into the HTML template.
• ⚙️ The `join` method is employed to combine the individual HTML elements from the products array into a single string.
• 🖥️ After combining, the content is set as the response for the `/products` route, displaying the product list dynamically.
• 🔧 A mistake with content type `application/json` is corrected to `text/html` to properly render the HTML on the web page.
• ✔️ The final result displays a list of products dynamically from the JSON data, rendered via Node.js and JavaScript.

Q & A

What method is used to convert JSON data into a JavaScript object in the script?

The JSON data is converted into a JavaScript object using the `JSON.parse()` method.

How does the app handle displaying products on the web page?

The app reads the `products.json` file, converts the JSON data into a JavaScript object, and then loops over the products to display them dynamically in the `product_list.html` file.

What function is used to loop through the products array?

The `map()` function is used to loop through the `products` array, allowing transformations to be made for each product.

How are placeholders in the HTML file replaced with product data?

Placeholders in `product_list.html` (e.g., `{{name}}`, `{{model_number}}`) are replaced with product properties (e.g., `prod.name`, `prod.model_number`) using the `replace()` method.

What does the `join()` method do in the script?

The `join()` method is used to combine the elements of the `productHTMLArray` into a single string, removing any commas between the elements.

Why was the initial HTML response not rendered as expected?

The initial response was not rendered correctly because the content type was set to `application/json`, which caused the browser to interpret the response as JSON instead of HTML.

How was the issue with rendering the HTML response fixed?

The issue was fixed by changing the content type from `application/json` to `text/html`, which allowed the browser to render the HTML correctly.

What is the purpose of the `productResponseHTML` variable?

The `productResponseHTML` variable stores the final HTML content with the product data after replacing the placeholders in the `product_list.html` file.

What does the `fs.readFileSync()` method do in this script?

The `fs.readFileSync()` method is used to read the content of the `product_list.html` file and store it as a string in the `productListHTML` variable.

How does the server respond when a user navigates to the `/products` URL?

When the user navigates to the `/products` URL, the server sends an HTML response that contains the list of products with their properties dynamically inserted into the template.

Outlines

00:00

📄 Reading and Parsing JSON Data in Node.js

In this paragraph, the focus is on how to read JSON data from a `products.json` file and convert it into a JavaScript object using the `JSON.parse` method. The `app.js` script reads the file and assigns the parsed JavaScript object to the `products` variable. This object is then logged to the console as a JavaScript array, where each element represents a product. The goal is to display this product list on the webpage when a user navigates to `/products`, instead of showing a simple 'You are in products page' message. The next step involves creating an HTML file named `product_list.html` to render the product details dynamically.

05:00

🖼️ Creating and Displaying the Product List in HTML

This section covers how to create a new HTML file (`product_list.html`) to display products on the webpage. Initially, the products are hardcoded in the HTML file. The script reads the `product_list.html` file into a variable and displays it when the user navigates to `/products`. However, the aim is to loop over the products array and dynamically populate product data (like name, model number, and image) in the HTML placeholders using JavaScript. Placeholders are set using double curly braces (`{{ }}`), which will later be replaced with actual product data from the `products` array using the `map` function in JavaScript.

10:01

🔄 Replacing Placeholders with Dynamic Product Data

Here, the focus shifts to replacing the placeholders in `product_list.html` with actual product data from the JavaScript object. Using the `map` function, the script iterates over the `products` array, replacing placeholders like `{{name}}` and `{{image}}` with corresponding values from the product object. The updated HTML content for each product is stored in a new array, and this array is logged to verify the successful replacement. Each element of the array now contains HTML strings representing individual products, where placeholders have been replaced with real data.

🧩 Combining HTML Strings and Sending as a Response

The paragraph describes how to combine individual HTML strings from the product array into a single HTML string using the `join` method. The `join` method merges the elements of the array without any commas, resulting in a continuous string of HTML content. The combined HTML string is then set as the response for the `/products` page. Additionally, a mistake is corrected when trying to join the product HTML array, and the script is modified to send the correct HTML response to the browser by updating the content type from `application/json` to `text/html`. Once corrected, the server displays the full product list on the webpage.

Keywords

💡JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format. In the script, it refers to the format of the data being read and converted into JavaScript objects. The app reads a 'products.json' file and then parses this data to display it on the web page.

💡JavaScript Object

A JavaScript object is a collection of key-value pairs, often used to store structured data. In the video, JSON data is converted into a JavaScript object so that it can be manipulated within the application. Each product in the JSON data is represented as a JavaScript object.

💡products.json

'products.json' is a file that stores product data in JSON format. In the script, this file is read and its content is parsed into JavaScript objects. The video focuses on using this data to dynamically generate product listings on a webpage.

💡FS Module

The FS (File System) module in Node.js is used to interact with the file system. In the video, it's used to read the contents of the 'products.json' file and 'product_list.html'. The 'readFileSync' function from this module is specifically highlighted to read files synchronously.

💡Callback Function

A callback function is a function passed into another function as an argument to be executed later. In the video, a callback function is passed to the 'map' method, which processes each product object in the array and generates HTML for it.

💡Map Method

The 'map' method in JavaScript creates a new array populated with the results of calling a provided function on every element in the original array. In the video, this method is used to loop over the 'products' array and transform each product into HTML format by replacing placeholders with product details.

💡Placeholders

Placeholders are used in the 'product_list.html' file as temporary markers to be replaced with actual product data. For example, placeholders like {{name}} and {{price}} are replaced by the corresponding product properties. This enables dynamic generation of the HTML content.

💡join() Method

The 'join()' method is used to combine the elements of an array into a single string. In the video, after transforming each product into an HTML string, the 'join' method is called to combine the product HTML into a single string for rendering on the page.

💡Content-Type

'Content-Type' is a header in HTTP responses that tells the browser what kind of data is being sent. In the video, the 'Content-Type' header was initially set to 'application/json', causing an issue with rendering HTML. Changing it to 'text/html' fixed the issue and allowed the HTML to be displayed correctly.

💡Node.js

Node.js is a runtime environment that allows JavaScript to be run on the server. In the video, the entire product display functionality is built using Node.js, from reading the JSON data and HTML files to serving the generated HTML content to the user.

Highlights

Introduction to reading JSON data and converting it into a JavaScript object using json.parse method.

Logging JavaScript objects converted from JSON shows the structure of the products in an array format.

Objective is to display product data on the web page when navigating to the root URL /products.

Creation of an HTML template (product_list.html) to display the product list dynamically.

Using the 'fs' module to read the product_list.html file and assign its content to a variable in app.js.

Replacing placeholders in the HTML file with product data from the JSON file dynamically.

Usage of JavaScript map function to loop over the products array and transform data for each iteration.

Placeholders like {{product.name}} and {{product.model}} are dynamically replaced with actual product details.

Ensuring dynamic values like size, camera, price, and color are filled in the product list HTML page.

Replacing the hardcoded product image placeholder in the HTML with the actual image from the JSON data.

Combining transformed HTML from the products array using the array join method to remove commas and form a single HTML string.

The final HTML content is rendered on the products page after replacing the placeholder content with actual product details.

Addressing an issue where the wrong content type (application/json) was being sent instead of text/html, causing HTML not to render correctly.

Fixing the content type to text/html allows the product details to be displayed correctly in the web browser.

The JSON data is successfully transformed into JavaScript objects, and product data is rendered dynamically in the Node.js web application.

Transcripts

in the last lecture we learned how to

read Json data and how to convert it

into a JavaScript object

so in the app.js here

we are reading this products.json file

and then we are converting the Json data

which we have read from this

products.json file into a JavaScript

object using this json.pass method

and then we are assigning that

JavaScript object to this products

variable

and when we are logging this products

variable here you will notice that a

JavaScript array has been logged here

and inside that array we have those Json

objects as a JavaScript object

and each object here represents a

product and we want to display these

products in the web page whenever the

user navigates to root URL slash

products currently when the user types

root URL slash products in the address

bar we are showing this response you are

in products page but instead of showing

this response we want to show the

product list in the web page let's see

how we can do that for that the first

thing which I am going to do is inside

this template folder I'm going to create

a new HTML file I will call this product

list.html

and inside this HTML file I'm going to

write some HTML and in order to save

some time

I have already written that HTML so

let's copy it from here

let's go to vs code and let's paste it

inside this product list.html

let's move this Terminal A bit down

okay so this is the HTML content for

this product list HTML now let's go

ahead and let's read this product

list.html file from our app.js

so again

here I am going to create a new variable

I will call it product list HTML

and again I am going to use this FS

module and on that I will call read file

sync to this let's pass the path of the

file

so here I will say root directory so dot

slash then we have to go to this

template folder and inside that template

folder we have product list.html

okay let's also specify the encoding

which is going to be utf-8 so this

product list HTML it is going to store

the HTML content of this product list

HTML file so basically this HTML content

now let me show you how this HTML

content will look like in the web page

so let's copy this variable here and

here when the user types the root URL or

the root URL slash home there we want to

replace this content with this HTML

content which we are storing in this

product list HTML variable

with this let's save the changes let's

stop the server by pressing Ctrl C and

let's start the server again

and now let's go to the web page

and here when I type root URL and when I

press enter

you will notice that a product detail

has been shown here

let me zoom out this web page

okay so a product list has been

displayed here and currently we are hard

coding these values so if I go to that

HTML file this product list.html file we

are hard coding these values

but what we actually want is

we want to Loop over this products array

and for each iteration in the product

list.html file we want to use the

properties of the product object so for

example if I scroll up here we have a

product object logged in the terminal so

here instead of this hard-coded value I

want to use product.name instead of this

model number I want to use product dot

model number property okay but currently

we are hard coding those values

so first of all from the fjs let's get

back the previous code so in the home

page we want to display your in home

page

and here

on this products array I am going to use

map function so we can use map function

to Loop over an array in JavaScript and

for each iteration we can transform the

elements of that array so here I am

going to use this map function to this

map function we need to pass a callback

function and this callback function is

going to receive the current element

from this array for each iteration so I

will simply call it prod

now I will go back to this product

list.html and as I mentioned earlier

instead of using these hard-coded values

we want to use the properties of the

product object which we are going to

receive inside this product parameter so

here I am going to use some placeholders

and for the placeholder again I will use

a set of double curly braces inside that

I will use percentage and then I will

set a name here so here I will say the

placeholder is name

in the same way let's do the same thing

for model name model number and other

properties so here I will say model name

and actually it should be model number

so model no I will say here this is the

model name so here I will say model name

here I will use the name placeholder so

here we want to display the product name

in the same way let's also use size

placeholder here

here let's use the camera placeholder

here let's use the price placeholder

because here we want to display the

price

here let's use the color placeholder

and then we also want to display the

image of the product so to this Source

attribute we are going to specify a

placeholder and there I will name this

placeholder as image

and in the fjs for each iteration we are

going to replace this placed holder with

the properties of that product object

so here what I am going to do is inside

the body of this callback function let's

create a variable let's call it maybe

output

and to that output let's assign this

product list HTML

and in this product list HTML we want to

replace some placeholders so to this

replace method first we need to pass the

value which we want to replace let's say

we want to replace this placeholder

with

product image property of that product

so we are receiving that product object

inside this broad parameter and on that

we are going to have this product image

property

okay

so in this output variable we will have

the same HTML but in that HTML this

image placeholder has been replaced with

the value of this product image that

means this string value

now on that updated HTML which we are

storing in this output again we are

going to replace something so again I

will say output dot replace

and now let's say I want to replace this

name placeholder

with the name of the product so we are

storing the name of the product inside

this name property so here I will say

broad.name

and we are going to assign this result

back to this output variable itself

so now in this output variable

this image is replaced with the value of

the product image property and this name

placeholder is replaced with the name of

the product

now let's go ahead and let's do the same

thing for other placeholders so I will

pause this video here and I will replace

these placeholders with the property

values of that product

let's go to app.js and let me do that

okay so here I have replaced all the

placeholders which we have specified

inside this product list.html with the

properties of that product

finally let's go ahead and let's return

this output from here

and once the map method has finished

iterating over this products array it is

going to return a new array with the

transform data

let's go ahead and let's store that new

transform data into a variable and let's

call it product HTML re

and now let me go ahead and let me log

this product HTML array so when the user

will make a request to this root URL

slash products first we are sending this

text response and then let's also go

ahead and log this products HTML array

just to check what it contains

let's save the changes here let's stop

the server by pressing Ctrl C and let's

restart the server

and let's go ahead and let's make a

request to this products page

so in the response we see you are in

products page let's go to vs code and

here you will notice that some string

has been logged here let me move this

terminal a bit up

okay so basically here you will see that

we have an array

so here you can see we have an array

because it starts with this opening

square bracket and in that this HTML is

the first element

then we have a comma

and then this HTML is the second element

of that array and if you notice in these

htmls these values are replaced by the

actual value which we have read from the

product.json file now these values are

not hard coded here the placeholders

have been replaced with the property

values of that particular product object

okay then again we have a comma and then

we have the third element so each of

these elements of this array are

actually htmls we have htmls which are

quoted so basically we have strings

and in that string we have some HTML

content

now what we want is we want to combine

these elements of this array which we

are receiving here which this

product HTML array is returning we want

to join each elements of this array into

a single value and to join elements of

an array into a single value on that

array we can use join method

and to this join method we need to pass

the separator so here the elements are

separated by a comma so here we will

pass comma as the separator or delimiter

you can say and based on this this join

method is going to join all the elements

of this products HTML array so basically

it is going to remove this comma from

the array and it is going to join all

the elements

and it is going to return us a single

value in this case it is going to return

as a single string value

and to check that save the changes let

me clear the console here

and let's run this app.js once more

and let's go ahead and let's again make

a request to this products page

so we still see this response but now if

I go to the vs code here you will notice

that now instead of logging an array we

are seeing some HTML content so

basically all the elements of that array

has been combined into a single HTML

content we don't see any commas here

and we want to send this HTML here as a

response for the products page

so let's go ahead and let's do that

so first of all what I'm going to do is

let me first remove this console.log

statement

and before sending the response

first what I'm going to do is I'm going

to take this HTML variable here

and here in this HTML variable basically

this HTML variable is storing this

index.html

in this index.html we have this

placeholder called content so I want to

replace this content for that on this

HTML I can use this replace function and

there I want to replace this content

which we have inside this index.html as

a placeholder with the HTML content

which we are storing inside this

product list HTML so here I will pass

product list HTML dot join because here

we want to join all the elements of this

product list HTML array into a single

string and we want to join it by comma

and here let's go ahead and let's do the

result in a variable let's call it maybe

product response HTML

and let's go ahead and let's return this

HTML as a response

so here instead of returning this text

response now we are returning the HTML

response

let's save the changes here let's stop

the server by pressing Ctrl C

and let's restart this server by running

this node.js app

let's go to the web page

and Let me refresh the page

and here we don't see any content let's

go back to vs code

and it says product list HTML dot join

is not a function

that's because

here we need to use this product HTML

array

because this is an array and we can use

the join method on an array only

so here it should be

product HTML array with this let's save

the changes

and let's go ahead and let's run this

fjs again let's go to the web page and

let's again make the request to this

products page

and here we do get the HTML response but

this HTML response is not rendered as we

expected and that's because

here if you notice we are setting the

content type as application slash Json

that means here we are telling the

browser that we are sending a Json data

and that's why the HTML response which

we are sending from here that is treated

as a Json data and not as an HTML

so here all we have to do is we have to

change this content type to text HTML

with this let's save the changes

let's stop the server and let's restart

the server let's go to the web page

and now let's refresh the page

and now you will notice that all the

products are displayed here in this web

page

okay

so here

we transform this Json data into a

JavaScript object and then we are making

use of that JavaScript object to display

it in the web page from our node.js

application

this is all from this lecture if you

have any questions from this lecture

then feel free to ask it thank you for

listening and have a great day