Display JSON data in HTML table using JavaScript
Vložit
- čas přidán 8. 04. 2022
- Hello everyone, in this video we are going to fetch data from a JSON file, and we are going to display them in an HTML table with JavaScript.
Let me quick explain what we are going to do.
We have some products stored in a JSON file. We are going to use the Fetch API to get those products from the JSON file. And we are going to put them in an HTML table.
It's simple and easy.
You can read the article and download the source code on my website:
tinyurl.com/2ddzf96y
If you feel like saying thanks, you can buy me a coffee.
www.buymeacoffee.com/digitalfoxb
If you like my videos press the subscribe button,
it will help me a lot.
Thank you.
THANKS nicely explained straight to the point and easy to understand in less than 5 minutes compared to other 1 hour complicated youtube videos
This
This guy is the MAN! He is helpful, and has a good heart. He helped me with my problems and took the time for me. Subbed + Liked
Thanks for the sub!
Hi guys, i didn't mention in the video, that the script needs a local server like wamp, or xampp to run.
If you more a reader, you can read the article and download the source code from my website:
digitalfox-tutorials.com/tutorial.php?title=Fetch-data-stored-in-a-json-file-with-JavaScript
Can you show us how use Ajax to add the product into the shopping cart🤔
But the link is not working, I've been trying to download since yesterday
@@unclegazza5783 Yes soon
@@aholiab4321 Hey, it works i just tested it out, this is a link to the article on my website, you will find the download button at the end of the article.
@@DigitalFox-tutorials I got my firsnz to try it from here also, did you restrict Nigerian IP address to your website 😭😭.
Very concise and clear, absolutely perfect explanation speed.
Thank you
Excellent video. It helped me to easily understand how to dynamically create HTML using JS and to render it using the DOM. Thanks!
Glad it was helpful!
very straightforward and well explained thanks man!
Glad it helped!
great it helped bro! I have been wondering for 2 days for this.
Awesome job explaining this. You made it so easy to understand. I wish I could give more than one 👍.
Thank you
Always a perfect tutorial.
Thank you 💓
Thank you very much.
That's a brilliant tutorial, thank you so much!
Thank you
Very simple and detailed tutorial
Thank you
very helpful with clear explanation👍
Glad it was helpful!
Well explained. It helps me lot. Manu many thanks brother.
Thank you
thankyou so much, good explanation. i expected more videos in JSON
Thank you.
I have more videos on how to work with JSON files on my channel. Check them out:
czcams.com/video/0Nw1GvtmblY/video.html
czcams.com/video/TMAwyq14FUI/video.html
Very clear tutorial, thanks!
You're welcome!
Thanks, man. Great explanation.
Thanks
awesome tutorial. thank you so much man!
You're welcome!
very basic and perfect for my learning requirements at the moment. Regards.
Thank you
thank you very much sir. >>ขอบคุณมากๆเลยครับ
subscribed your channel awesome content thanks bro this is what i am looking for
Thank you
Thanks A Lot
love you man
you saved my S 😅😅
nice thankYou
thankyou for source code download !
You are welcome
Excellent
Thanks
Helpful+++
Glad it was helpful!
Thank you so much!!!
You're welcome!
Nice thank you
Thank you too!
No hiciste el editar y eliminar?
You are heaven sent! Exactly what I've been looking for. Do you have tutorial on how to add JSON entries from user input (Add/Update/Delete)?
Thank you, check this out czcams.com/video/HyyAg0cI5N8/video.html
@@DigitalFox-tutorials Is it possible using javascript only? I'm trying to work my way around github pages, php is not yet allowed to be hosted.
Sorry, you can't manipulate files with javascript, you need a server side language to do that.
@@DigitalFox-tutorials I see. So in order to add key pairs to JSON it has to be added manually? Cannot add via code except PHP?
I am saying that if you want to write data in a file you have to use a server-side language like PHP, or you can use node.js. But you can not use javascript alone for this.
Check this out. czcams.com/video/lT0w3pzZz4w/video.html
Thankfully i didnt go all the way by myself, would have been huge. So thanks for simplyfying. It displays things as it was written ${something.name} instead of the actual data however..
Glad you liked it, keep going, happy coding
THANKS!
Welcome!
hey is there a way to use .json offline? i want to make a app for mobile phone including a function like this. i need to load and store data from/to a .json to show in my index.html. the problem i got is, i want that application as an offline-app. do you have a solution for my problem?
Hey, yes you can. If the json file is on your applications root folder and not in a remote location i don't see any problem
thank you
Thank you too
This doesn't work for me. I get this error
from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
Hey, where do you run the code? Are you fetching the JSON data from a remote location?
Hmm, I tried to recreate this, and I I get is a header line.
Then i tried downloading your original code to run that - and all i get is the header line, no products.
Hey, do you run the code from inside your localhost server. If not it will not work.
very helpful video
could you tell me the reason why you used queryselecter?
im still in a basic step
Hey, with the querySelector method we can target any html element like we do with css.
Check this out: developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
1000000000000000000000 thanks bro.
Thank you more :)
how do I escape hyphen in Key name ? It's giving me reference error and string/bracket Notation is not working.
Let's say this is the JSON key, value pair: "product-name": "Orient Vita Pro 28"
You access the key like this: ${product["product-name"]}. I hope this is what you'r asking.
@@DigitalFox-tutorials Thanks, this works.
I tried to follow along but even after downloading your source files, it still doesn't display any but the table (no data in the tables)
Hey, are you running the code from your local server?? If not, it will not work.
Wow i searched Hours to find a Way and the Solution is in an 4min Video.
Awesome thank you.
Is there a Way to do this with mutiple jsons ? Tried promise.all but cant figure out, how to store each json separat.
Hey thanks, i am sure there is a way to fetch data from multiple JSON files, but i didn't done it so far, i will think this over and i will get back to you.
Súper entendible amigo!! Pregunta? Si quiero que el último producto no salga que debo hacer?
Before the for-of loop you can say products.pop(). This will remove the last object from
the products array.
products.pop();
for(let product of products){
out += `
${product.name}
${product.price}
${product.inventory}
${product.productCode}
`;
}
@@DigitalFox-tutorials súper te agradezco amigo 👊
The data object is printing its property values in console but on the webpage its printing undefined.....why is that happening
Hey, check the values in the for-of loop for any typos.
${product.name}
${product.price}
${product.inventory}
${product.productCode}
I've tried to put in the table and onchange function but it only work on the first row any solution:(
Hey, let me take a look at your code.
@@DigitalFox-tutorials
function chon(){
var x = document.getElementById("chon").value;
document.getElementById("demo").innerHTML= x;
};
fetch("db/employees.json")
.then(function(response){
return response.json();
})
.then(function(employees){
let placeholder = document.querySelector("#Employees-table");
let out = "";
for(let employee of employees){
var n=0;
n=n+1;
out += `
${employee.stt}
${employee.name}
${employee.phone}
${employee.email}
Thực tập
Nhân viên
Chuyên viên
`;
}
placeholder.innerHTML = out;
});
You are not closing the select element and the table cell that holds the select menu.
Thực tập
Nhân viên
Chuyên viên
Try again. Hope it works.
@@DigitalFox-tutorials tks i've tried it but it still doesnt work 😢
You are applying the same id in every select menu. Every id in a page must be unique.
Try this:
Remove the id from the select menu, and pass-in as an argument 'this.value' to capture the value.
And change the chon() function like this:
function chon(value){
document.getElementById("demo").innerHTML= value;
};
If this is not working zip your files and send them to digitalfox.tutorials@gmail.com, so i can see the whole project.
my code is not working :( even after i download your files it just shows the table rows without data what am i doing wrong im on macbook i tried chrome EDIT: It works on mamp only.. which is weird. it does not work locally. what can i do
It's not weird, the script needs a local server to run. When we are dealing with http request we need a server to handle the request to serve us the data that we requested. In my opinion everything you build, even it's only html and css, you have to do it in your local server. Think about this: you have finished a simple website with html, css, and a little bit of javascript. Where do you upload it? On a server.
@@DigitalFox-tutorials Youre a gem thank you for responding also so quickly..!. May i contact you for a simple question regarding my assessment?
Yes, but i don't always have the time to respond right away.
is there any link that should be posted in head section, cause when I open index.html in browser there is no table, only header
Hey, You have to run the files from your localhost server
@@DigitalFox-tutorials I did. I've done already some small projects and wanted to try this table. Everything is in one folder, I open in from that folder, but no table in browser.
I tried to add link from bootstrap, thinking that maybe code is from there and has to have link, but didn't help.
Download the source code to see if anything changes.
digitalfox-tutorials.com/tutorial.php?title=Display-JSON-data-in-HTML-table-using-JavaScript
@@DigitalFox-tutorials source code is the one I used and put everything in local folder. I didn't type code myself.
I don't know what could be wrong. Is there anything that should be downloaded or linked in like bootstrap?
There is noting else. Are you sure you run the code from inside you localhost server?
Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML')
Its showing this error even I tried put the script tag below table tag but not working.
I think that you maybe have a type error somewhere in your code.
Download the source code and try again.
digitalfox-tutorials.com/tutorial.php?title=Display-JSON-data-in-HTML-table-using-JavaScript
Do you run the code from your local server?
Hi, I downloaded your source file, but still I cant see json file in html, just lables. please help
You have to run the files from your local server. Read the comments below this will help you.
@@DigitalFox-tutorials ou, thank you for fast answer. Is there some way how to do it locally? I can pull .json file from database, but I want to show it in html?
Running the code locally means, running the code in your computer and not in a remote server. But in order to run the tutorial's code locally, you have to install a local server like mamp or xampp in your computer, and run the files from inside the local's server directory.
What if the JSON file starts with object? for example
{info:
[
{
"id":1
},
{
"id":2
}
]
}
In this case you have to loop through the "info" object like this:
for(let product of products.info){
// output products
}
Also you have to use quotes around "info".
Thanks good question.
@@DigitalFox-tutorialsthank you so much! I did it 🎉
Hey, I copied the code as it is on your site, but I still get the "Uncaught TypeError: Failed to fetch" the script.js. Just installed python do I need to install some libraries?
I know it's a late reply, but why are you using Python? This is for JavaScript/HTML.
I don't understand @@larsiparsii
I tried with this code but not able to see html table
Hey maybe you got a typo in your code.
Download the code from my website and test it out.
digitalfox-tutorials.com/tutorial.php?title=Display-JSON-data-in-HTML-table-using-JavaScript
@@DigitalFox-tutorials No typo error I checked twice. It's not working.
Do you have a local server installed on your computer like WAMP or XAMPP. Or if you run the code on a live server in VS code it will not work.
@@DigitalFox-tutorials How would I be able to get it to work on a local server? I am using this example to learn further how to work with html, css and js, and it would be very helpful to be able to run this locally. It looks like other might benefit from this too.
GUY WHO CAN HELP ME GET FULL CODE
Get the code from my website:
digitalfox-tutorials.com/tutorial.php?title=Display-JSON-data-in-HTML-table-using-JavaScript
css file
Get the source code from here:
digitalfox-tutorials.com/tutorial.php?title=Display-JSON-data-in-HTML-table-using-JavaScript