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
@@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.
best explained and to the point i have searched alott but do not able to fetch the record from json file... but u are saviour thanks a tonnnnnnn ❣❣..if someone watched this and follow the steps no other video is required.
Thank you. I have more videos on how to work with JSON files on my channel. Check them out: th-cam.com/video/0Nw1GvtmblY/w-d-xo.html th-cam.com/video/TMAwyq14FUI/w-d-xo.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..
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.
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. th-cam.com/video/lT0w3pzZz4w/w-d-xo.html
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.
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
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?
Thank you so much for this video. I have a question i could not solved since 3 days. How would i do to target only ONE image and style it in CSS ? For example if i want to change the width of the 2 second image ("id":2). How would i proceed ? Been searching answers for days..
I am glad you liked the video, thank you. Now based on my code you can target the second image from the CSS file like this: table tr:nth-child(2) img{ width: 100%; } The above css code means that we are targeting every image in the second table row and set the width to 100% Hope it helps.
@@DigitalFox-tutorials Oh my god it is working! Amazing thank you so much. Do you know if it is possible to target any img in the DOM ? I tried desperately to target an img by changing the attribute/ID of any of those, but did not find how. I tried to use the "id" and "name" from the Json object properties to target one of those img but it did not work. Do you know if it is possible ?
You can change the number of the tr:nth-child to target the image you want: table tr:nth-child(3) img{ width: 100%; } // Targeting the third image. This is one way or you can ad - in the javascript file - ad an id attribute to the image tag combining text and the id property from the JSON file. and target the image you want using css like this: #image-id-1{ border: thin solid red; } #image-id-2{ border: thin solid blue; } #image-id-3 ... and so on... you get the point.
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.
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 += `
@@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 += `
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.
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.
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 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.
@@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?
Yes but, the URL provided in the fetch method should be accessible, and CORS (Cross-Origin Resource Sharing) must be enabled on the server if you are fetching data from a different domain.
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-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.
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 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.
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?
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?
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 😭😭.
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!
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 concise and clear, absolutely perfect explanation speed.
Thank you
best explained and to the point i have searched alott but do not able to fetch the record from json file... but u are saviour thanks a tonnnnnnn ❣❣..if someone watched this and follow the steps no other video is required.
Thank you, I am glad you liked it.
Thank you my Indian brother for best teaching ❤
Thank you, but i am actually from Greece.
@@DigitalFox-tutorials Excuse me bro , I thinked you are from India 😅🤦🏻♂️
No worries, we are all brothers.
Best video I have found on this. Thank you. Vamos Greece ❤️
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
very straightforward and well explained thanks man!
Glad it helped!
very helpful with clear explanation👍
Glad it was helpful!
Very simple and detailed tutorial
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:
th-cam.com/video/0Nw1GvtmblY/w-d-xo.html
th-cam.com/video/TMAwyq14FUI/w-d-xo.html
Always a perfect tutorial.
Thank you 💓
Thank you very much.
Very clear tutorial, thanks!
You're welcome!
Well explained. It helps me lot. Manu many thanks brother.
Thank you
love you man
you saved my S 😅😅
awesome tutorial. thank you so much man!
You're welcome!
Thanks, man. Great explanation.
Thanks
That's a brilliant tutorial, thank you so much!
Thank you
very basic and perfect for my learning requirements at the moment. Regards.
Thank you
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
thank you very much sir. >>ขอบคุณมากๆเลยครับ
subscribed your channel awesome content thanks bro this is what i am looking for
Thank you
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.
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 th-cam.com/video/HyyAg0cI5N8/w-d-xo.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. th-cam.com/video/lT0w3pzZz4w/w-d-xo.html
No hiciste el editar y eliminar?
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.
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
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
thankyou for source code download !
You are welcome
Thank you so much for this video. I have a question i could not solved since 3 days. How would i do to target only ONE image and style it in CSS ? For example if i want to change the width of the 2 second image ("id":2). How would i proceed ? Been searching answers for days..
I am glad you liked the video, thank you. Now based on my code you can target the second image from the CSS file like this:
table tr:nth-child(2) img{
width: 100%;
}
The above css code means that we are targeting every image in the second table row and set the width to 100%
Hope it helps.
@@DigitalFox-tutorials Oh my god it is working! Amazing thank you so much. Do you know if it is possible to target any img in the DOM ? I tried desperately to target an img by changing the attribute/ID of any of those, but did not find how. I tried to use the "id" and "name" from the Json object properties to target one of those img but it did not work. Do you know if it is possible ?
You can change the number of the tr:nth-child to target the image you want:
table tr:nth-child(3) img{
width: 100%;
} // Targeting the third image. This is one way
or you can ad - in the javascript file - ad an id attribute to the image tag combining text and the id property from the JSON file.
and target the image you want using css like this:
#image-id-1{
border: thin solid red;
}
#image-id-2{
border: thin solid blue;
}
#image-id-3 ... and so on... you get the point.
@@DigitalFox-tutorials Thank you so much, coffees on me. I wonder what is the point by doing all that on Javascript when you can do it with HTML/CSS ?
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.
Excellent
Thanks
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 👊
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.
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.
You running your html on the webserver right?
Yes, else it will not work
Nice 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?
Helpful+++
Glad it was helpful!
Thank you so much!!!
You're welcome!
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.
nice thankYou
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?
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}
Same process getting JSON fron an URL?
Yes but, the URL provided in the fetch method should be accessible, and CORS (Cross-Origin Resource Sharing) must be enabled on the server if you are fetching data from a different domain.
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 🎉
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.
Thanks A Lot
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.
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?
1000000000000000000000 thanks bro.
Thank you more :)
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
THANKS!
Welcome!
thank you
Thank you 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