How to fetch data from json file and display in html table using javascript
Display JSON data in HTML table using JavaScript
Timecodes:
hello everyone in this tutorial we are
going to see how to fetch the data from
a json file and display them in a table
with javascript and the fetch method
if you look at my browser you will see a
table of products
this is the end result this is what we
get at the end of this tutorial
let's take the browser out of our way
and take a look where those products are
coming from
the products are stored in a file called
products.json
and it's the file that we see right now
as you can see in the file we have an
array of objects
every object is a product every product
has properties
and so here we have an id a name a price
an inventory and a product called
property
we are going to target those properties
in the javascript file to get the values
another thing here is that every image
property is associated with an image
inside the product images folder let's
see the other two files that we need for
this tutorial
i have a blank javascript file and an
index file with a basic html structure
i also have a style.css file but i'm not
going to deal with it it is not
important for this tutorial if you go to
my website and download the source code
you will get the css file too
now let's start coding
in the index file and inside the body
tags i will create a table i am going to
split that table in two sections the top
section is the table's head and the
bottom section is a table's body
inside the table's head i will create a
table row and inside the table row tag i
will put the column's headers
now let's go to the table's body
here we are going to insert our products
but we will do that from the javascript
file the only thing that i will do here
is to add a data output id to the
element so i can target it from the
javascript file let's quick see in the
browser what we have so far
as expected we see only the tables
headers section
now let's go to the javascript file to
populate the rest of the table but let's
clear first the screen
the first thing that i have to do in the
javascript file is to call the fetch
method so i can send a request to the
server to fetch the json file
and as an argument i will pass in the
file's name
next i have to catch the server's
response with a dot then method
the then method takes a function as an
argument so we can do something with the
server's response
in our case we're expecting from the
server a json file so we are going to
use the json method to convert the json
data to a javascript object that we can
work with
but the data are not accessible at this
time so we have to use another.then
method to fetch the products
again we have a function as an argument
so we can do something with the data
and by data i mean our products
the first thing that we'll do inside the
function is to get access to the table's
body element i will store the element in
a variable named placeholder
next i will create a variable named out
and i will set its value to an empty
string
at the end of the script this variable
will hold all the products
next i will have a for off function to
loop through the products array and get
access to each product
inside the loop i will append every
product to the outer variable
now when i use bucktakes instead of
quotes i can write regular html inside
them which is very helpful if you have
to use some kind of template to fill out
now in here i will have a table row
element and i will add the data columns
in our first column we are going to
display the product's images so i will
use an image tag and inside the source
attribute i will pass in the product's
image property
this one
now let's do the same thing with the
other properties we have the product's
name the price the inventory and the
products code
and last we have to populate the table's
body element with our products and
that's it
let's bring back the browser and reload
the page
and we see our table is filled with data
from the json file that's all for today
remember to go to my website and
download the source code
if you like my videos you can hit the
subscribe button it will help me a lot
thanks for watching guys see you in the
next video
