How to fetch data stored in a json file | Read with javascript local json file.
HTML-код
- Опубликовано: 29 авг 2024
- Hello everyone, in this video we are going to see how to read a JSON file with JavaScript.
To be precise we are going to fetch records of products stored in the JSON file, and display them in the page using an html template from the JavaScript file.
You can find the source code on my website :
digitalfox-tut...
If you feel like saying thanks, you can buy me a coffee.
www.buymeacoff...
Photos by
Pixel Bee on
unsplash.com/@...
Fabian Heimann
unsplash.com/@...
John Torcasio on
unsplash.com/@...
Salman Hossain Saif on
unsplash.com/@...
Darryl Low on
unsplash.com/@...
Simon Daoudi on
unsplas
I’m happy to see that you used my photo in your video. Thank you for acknowledging my contribution and giving me credit.
Thank you too!
THANKS AGAIN!!! this what i have been looking for, a simple tutorial to fetch data and converting to javascript object then display
Thank you
I made an error in 4:12, the value of the alt attribute is ${image.description}, sorry guys.
Happens to the best of us. : )
Simple et efficace. Merci.🔥🔥🔥
Thank you so much! Can you make other videos like this? Like fetching json files for other things. Thank you and God bless.
Thank you to, I will try!
thanks I've been looking for this all day
Glad I could help
Thank you so much!! you help me a lot.
Happy to help!
Thanks bro, it's really great work ♥️♥️
Thank you
How to make dynamic product details page using same ajax script
If user touches on the list it must open dynamic product detail page
Hey, check this out i think it's what you need.
digitalfox-tutorials.com/tutorial.php?title=Creating-dynamic-web-pages-using-PHP-and-MySQL
shouldnt the send() come after the onload?
A few years ago we used to put the send() method after the onload ev. listener due to a browser bug. But this days it works fine either way. Also we don't use so much the XMLHttpRequest method. We switched to the fetch API.
yh, i want to learn the fetch api method but im contemplating if it can fetch local json file? coz ive known it to only fetch api from remote servers@@DigitalFox-tutorials
You can fetch a local JSON file using the fech API. But you can only read the data, you can not alter a file using JavaScript.
So for me this doesn't work, CORS actively blocks the request. How do I circumvent this?
Hey, sorry for the late response. I think that in a local environment the problem occurs when we
use visual studio's live server.
I am not 100% sure, but i read that somewhere.
Set up a localhost server like MAMP or XAMPP to try it out.
@@DigitalFox-tutorials no problem, thanks for replying! it was indeed a problem with visual studio live server. i got it fixed eventually 👍
MY GOAT
Thanks Bro
Hi, do you by any chance know how to include a “load more” button/feature to be able to show more products?
Hey, good idea, i will make a video about it
Hiya have you figured out how to do this by any chance ?
@@DigitalFox-tutorials Thank you so much !!! will look at this now and get back to you
Check this out, and download the source code
digitalfox-tutorials.com/tutorial.php?title=Creating-a-load-more-button-with-fade-in-effect-in-javascript
@@DigitalFox-tutorials this is amazing !! I actually figured how to work it out using the previous file you posted however I definitely will be going through the article so I actually understand a bit more what’s actually happening 😂😂😂 THANK YOU !!!!
Hi thank u but i need the code i cant found it in youre website
Hey, i updated the link in the description . I didn't notice that it was broken. Sorry.
can you please do a video of simple CRUD and how to empty out the data in an input field after submit Thanks
I have a crud playlist on json and php
bro source code doesn't found for your link plz provide source code
Get the source code from my website
digitalfox-tutorials.com/tutorial.php?title=Fetch-data-stored-in-a-json-file-with-JavaScript
thanks for this video, if I have a database locally, how can I fetch them? and if I have DB on online server, how can I fetch data on-page and connect the web with the data too
Thanks for you comment, check out this video ruclips.net/video/qttOpYzsIPs/видео.html
can mysql data in jason?
Yes, watch this video ruclips.net/video/qttOpYzsIPs/видео.html
It says its not iterable
I think there is maybe a typo in your code.
Get the source code from my website and compare it to yours.
digitalfox-tutorials.com/tutorial.php?title=Fetch-data-stored-in-a-json-file-with-JavaScript
Excel Bro,
Realy a great help in my struggle on the same... Is there any way I can get this download source code for my learning reference?
Thank you, here you go : digitalfox-tutorials.com/youtube-files/storing-data-in-json-file.zip
Thank you so much ! It helped me a lot :)
Thank you too
Dude... I am getting cross origin not allowed error... Plz help me as soon as posible... I am having a project to submit....
Hey, are you trying to fetch data from a remote address, or localy? If you use a live server from VS code maybe that is the problem. Run the files in you localhost 8080 port.
@@DigitalFox-tutorials so for this I'll be needing xampp application??
@@lyricalbuddy246 Yes, installation is very straight forward, don't worry.
@@DigitalFox-tutorials ok thank you so much....
Hi I am looking for a like and dislike button tht increments on button click but the data is supposed to be save in local file instead of db or using local storage
Hey check tihs out ruclips.net/video/_gToDN-aoyI/видео.html , maybe it will give you an idea on how to do it.
@@DigitalFox-tutorials ....I don't want a browser local storage I want to handle thru a text file.i want to store the count in file and the increment it the number of time the user like it and display in a label.can u please send me a sample code
I will try
@@DigitalFox-tutorials ..can u please do it today its urgent.i just want two buttons like and dislike and those like and dislike count is saved in a text file and shown on the screen in the form of labels
@Digital Fox Make it very simple only two buttons wid no css and it increments the value based on the last counter value from the file..I just need to see the functionality thts it .ur quick response will be highly appreciated 👍
It's showing undefined
Hey, click on the link to download the source code, maybe you have a typo in your code.
digitalfox-tutorials.com/tutorial.php?title=Fetch-data-stored-in-a-json-file-with-JavaScript
Source code link doesnt work
Try this : digitalfox-tutorials.com/tutorial.php?title=Fetch-data-stored-in-a-json-file-with-JavaScript
thnaks so much but the link is not working
Try this out digitalfox-tutorials.com/tutorial.php?title=How-to-fetch-data-stored-in-a-json-file-with-JavaScript
@@DigitalFox-tutorials its still not working , I'm from Nigeria
@@abayomidove5434 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.
xmlhttprequest in 2022, rly?
Hey, coding for many years creates habits, sometimes i use fetch, sometimes xml-http-request. If you like to see how this is done using fetch, check this out: ruclips.net/video/eS-FVnhjvEQ/видео.html.
can you send the source code please?
Here you go: digitalfox-tutorials.com/youtube-files/products-from-json-file.zip
So fast no explaination nothing this is not for beginers so this vidéo is not for me i dislike
I am sorry that this video was not helpful to you, but still you can download the source code and use it. digitalfox-tutorials.com/tutorial.php?title=Fetch-data-stored-in-a-json-file-with-JavaScript
@@DigitalFox-tutorials can i contact u?
@@kawtarmorag4131 Yes, here is my facebook page
facebook.com/digitalfox.web.tutorials