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 code 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 am 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 the table's head and the bottom section is the 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 data output id. 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 are 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 will do inside the function is to get access to the table.
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 out variable. Now when I use backticks instead of quotes I can write regular HTML inside them. Which is very helpful if we 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 product's 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 the 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.