JavaScript Tip: Using fetch to Load a JSON File

In this tutorial we continue our discovery of the fetch API by looking at how it can be used to load a JSON file. We also look at creating a request object for use with fetch.

Would you like to help keep this channel going?

For more resources on JavaScript:

Tutorials referred to in this video:

#javascript #AllThingsJavaScriptLLC

[timpoels]

I used to use MAP and XAMP too, but recently i dscovered the live server extension on VS Code. Works great much faster and more user freindly than MAMP!

[samuelrake]

Thank you very much. I was very frustrated before this

[aleherrera]

min 3:25, you saved my life. Thx for this video!

[vimalthanth]

Greate Video For json, Nice Work man!!!

[lavishkumar]

I am proud to be the 1000th like. Loved the Video It really helped.

[AntificationAdam]

Thank you mate, this was very useful. Easy to understand from the way you broke it down too.

[yourteacher]

Right to the point as always. Huge thanks!

[SandwichMitGurke]

thanks a lot! I've had this http/https error for hours and couldn't get it fixed. Now it works :)

[vont]

1) In your video, you mentioned a number of local servers and you also said you used a particular local server. Can you provide links to the local server that you used in this tutorial or other local servers you mentioned? I don't seem to find those servers links in your description.

2) So, after installing the local server, you can just type in the fetch url as ./{your jason file} ?

3) Also, do you have a tutorial or can you suggest some tutorials where you can incorperate the fetch JSON data onto the HTML page, using fetch(), JSON file and Javascript? there are many tons of information on the web on this type of code, but all mostly using some other JS libraries, like react, angular, jquery, etc. It's hard to understand without knowing these libraries. I just hope to find a simple example for beginners using simple JavaScript, Fetch() to get data from JSON file and display it on the html page. I have been trying to find some tutorials for beginners on this, i.e. using fetch() to fetch JSON data and display on HTML page using JavaScript.

Thank you for the help.

[aleksandregorov]

Thank you for the video! My question about fetch is this. What I am struggling with is I am trying to catch '404 (Not found)' error in fetch and it doesn't seem possible. I tried using 'try-catch', checking for 'ok' property and throwing my own error, using reject function and 'catch' in the 'then' method, nothing works. I am able to catch the error that I am throwing myself(I am also catching syntactic errors) but javascript still throws its own error to the console. So, is that possible to catch this error at all? Thank you, again.

[hammettdepressivo]

VIDEO MARAVILHOSO!!! ME AJUDOU MUITO!!!

[bigmancozmo]

is it just me or is anybody else getting "Uncaught ReferenceError: info is not defined
at <anonymous>:1:1" in the console

[umangternate]

How to save the data from the json file in a variable? I am thinking of const json Data = fetch(url... )...

[violajosephineh]

Hi there! Great video:)
I'm trying to fetch a specific object in my local json file, so I can set the content on the page with the object data. It's a blog, so I'm sending the id of the object from the page with all the blogposts, to each blogpost page. I know it works when the json info is online, cause then you just add url parameters, to find the page for that specific object and then fetch that link in js, but my question is: Is it possible to do with a local json file as well. Something a la fetch("../blogposts.json") + [id]

Hope it made sense and thanks for the lesson^^ again:)

[jjcampis]

xhr can load with the file:// protocol (no need for a server)
how can i make a polyfill or something with xhr support in case of error when trying to read from file://

please help me!

[Raaampage]

I don't know what I've done wrong but it doesn't work unfortunately. (URL scheme must be "http" or "https" for CORS request.)

[luluol]

I didn't understand, we need to run a local server in order that it works?

[abdullahalmasum]

Thanks for your share your valuable resources. I am getting a response in the below format from an API. How can I resolve this? Could you please help?
{
[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" },
{ "id": "1003", "type": "Blueberry" },
{ "id": "1004", "type": "Devil's Food" }
]
}

[Bajdster]

I'm wondering hot to use it more automatically, I mean - I made Application which scrape Fuel prices from site and then I want to use it by create json file with that data and then use it on my site, but there is a problems 1. How to start Automatically scraping the data and then how to use it on my site? Any Suggestions?

[abc_cba]

Hi, I am trying to mock a json file, I am unable to, can you help me with that, please ?