#16 Transforming JSON data into HTML | Fundamentals of NODE JS | A Complete NODE JS Course
Summary
TLDRIn 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
📄 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.
🖼️ 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.
🔄 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.
Mindmap
Keywords
💡JSON
💡JavaScript Object
💡products.json
💡FS Module
💡Callback Function
💡Map Method
💡Placeholders
💡join() Method
💡Content-Type
💡Node.js
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
Посмотреть больше похожих видео
#15 String Interpolation | Angular Components & Directives | A Complete Angular Course
Scraping Data from a Real Website | Web Scraping in Python
Render Dynamic Pages - Web Scraping Product Links with Python
video1090533831
Effortlessly Scrape Data from Websites using Power Automate and Power Apps
cara object linking and embedding | integrasi office
5.0 / 5 (0 votes)