Reading a local JSON file in JavaScript using Fetch API

#javascript #fetchapi
How to use JavaScript Fetch API to read a local JSON file and how show the result in console.
How to show fetched data in web developer console.
JavaScript Shorts:
• JavaScript Shorts

[@ashwinajmery6071]

Its feel rainy season...thats good

[@5095smf]

I love the rain sounds. Thanks for the tutorial!

[@oneminutecoder]

Thanks

[@exoaxse2256]

thank you very much finally after a few day resolve thanks bro

[@oneminutecoder]

Thanks

[@Lighter7900music]

Thanks man it was helpful!

[@danielsanchezmanez5153]

It works. Amazing. Thank you

[@NTFG]

Put the sound of typing in your next video

[@NTFG]

@@itsmaxim01 cuz

[@poknari]

my country here: Indonesia

[@dilemma086]

Thanks!!!

[@laneW612]

thanks buddy!

[@oneminutecoder]

Glad to help!

[@ertekinertunc]

thanks man, quick and easy solution. I have a question, how can I move the variable inside the function out?

[@oneminutecoder]

Şöyle kullanabiliriz let jsonData; fetch("test.json") .then(response => response.json()) .then(data => { jsonData = data; showInfo(); }); function showInfo() { console.log(jsonData); }

[@oneminutecoder]

Veya böyle fetch("test.json") .then(response => response.json()) .then(data => { showInfo(data); }); function showInfo(data) { console.log(data); }

[@oneminutecoder]

Ya da böyle async function fetchData() { const response = await fetch("test.json"); const data = await response.json(); console.log(data); } fetchData();

[@ertekinertunc]

Çok teşekkür ederim 🙂🙂

[@vignesh-l3i]

then how to print that data inside the document ?? bro plz replay .

[@oneminutecoder]

How to use response: kzbin.info/www/bejne/bJnTmJ56isulh6s kzbin.info/www/bejne/q6K0ooykrJaUhcUsi=9Rqd9-0ujbueya2r kzbin.info/www/bejne/q6K0ooykrJaUhcUsi=LM8WEjaVLUmEBZzN kzbin.info/www/bejne/qYvKn6mioLN9o6csi=CPcISYEl0kt--D-Q kzbin.info/www/bejne/q3WrqJmmqM6frassi=Iagk81OA3GO7Vg_S

[@tirthpatel4624]

Similarly, is it possible to update/write data into json file using fetch or any other function..for me Im trying to update using fs but giving error as writeFile not function

[@jimmlmao]

No, unless you write server side code to do that but thats a major security problem

[@satishsgm0157]

Do video on how to fetch json file from remote api also brother 😊

[@oneminutecoder]

Isn't that already?

[@antcannon]

new to APIs i am looking to find a way for this to show in my terminal. get an ERR_INVALID_URL error

[@unknownhacker9416]

Can you please help me I have name and regarding mail I'd in json file when I dynamically call the name and mails to usin Javascript in my html code in that time i am getting only names not emails what is the cause

[@gouravnainwaya5669]

Does this are possible in axios in react native

[@oneminutecoder]

Yes possible. React Native has a built-in Fetch API. But i am not a developer of React Native.

[@carloseduardomenendezm.2389]

Hey i would like to know how did you do to read the local file because i always get an error message telling me something about cross references policy!!!!

[@parveenchoudhary8258]

Why it is working on live server but not on chrome.

[@oneminutecoder]

Fetch API makes HTTP requests to servers. Request URL should be URL: http... and not should be URL: file:///C:/Users/ if you use liveserver JavaScript sees test.json like this Request URL: 127.0.0.1:5500/test.json

[@f4jrie09]

​@@oneminutecoder

[@aryansoni8141]

Which theme is this?

[@oneminutecoder]

i don't remember.

[@roselynbasan1326]

what compiler did you use?

[@BizzaroBrainBoi]

dangggg how did you do that!!

[@callowindia]

Can we need localhost for this

[@oneminutecoder]

Yes. It doesn't work when I directly click and open the html file

[@oneminutecoder]

In this example, i am using VS Code and Live Server Playlist for vs code kzbin.info/aero/PLrcsnb6QBvieVvHdr0X0M4uUiTSoGyAra

[@bashirajasu5186]

But I want only one name and capital How to do that

[@mr.RAND5584]

🇵🇭. Nice.

[@TdukeTduke]

I cant get it to work either. What am I missing.

[@oneminutecoder]

Run HTML file from within VS Code. Firstly add an HTML file Then paste this code inside it fetch("test.json") .then(response => response.json()) .then(data => showInfo(data)); function showInfo(data) { console.table(data.countries); } Add a JSON file test.json Then paste this code inside it { "countries": [ { "name": "Indonesia", "capital": "Jakarta" }, { "name": "Philippines", "capital": "Manila" } ] }

[@oneminutecoder]

You should see data in console. Ctrl + Shift + J

[@TdukeTduke]

@@oneminutecoder I got it to work now.. Thank you sir!!! I appreciate your response and commitment to help others learn!!

[@mrstanley3037]

Can I do this with txt file?

[@oneminutecoder]

YES. kzbin.info9Edc1day6p8

[@biswajitmohanty54]

I have done the same way but fetch is not defined, could you please help

[@oneminutecoder]

Do you use VS Code?

[@oneminutecoder]

Maybe you are not using an HTML page and you are using Node.js

[@biswajitmohanty54]

@@oneminutecoder yes I am using vs code

[@biswajitmohanty54]

@@oneminutecoder I want to run the js file how you show on your video

[@oneminutecoder]

Firstly add an HTML file

[@umangternate]

Anyone knows how to store data to a variable outside the fetch function?

[@oneminutecoder]

Do you mean this ? let countries; fetch("restcountries.com/v3.1/all") .then(response => response.json()) .then(data => { countries = data; }) .then(() => { console.log(countries); });

[@umangternate]

@@oneminutecoder exactly, but if I call console.log outside the fetch function, it is empty. Scope issue, I guess.

[@oneminutecoder]

@@umangternate Normally, for a code to run in JavaScript, previous codes must finish their work. But the fetch API doesn't work like that. Before the fetch finishes, the next code starts executing. So console.log(countries) runs before fetch brings countries. The codes waiting for each other are called synchronous, and the other is called asynchronous. That's why we use "then" in asynchronous structure. When you're done, do this. Why does fetch work asynchronously? For example, you will need to get weather forecasts from 10 different countries and you will connect to 100 different sources and get data. If you work synchronously, it will take too long. They should start fetching data at the same time without waiting for each other. This is what makes asynchronous structure necessary. fetch works like that. kzbin.info/www/bejne/rISvpmeIq7WBqJo kzbin.info/www/bejne/d6KyqGiXhbysa6M

[@umangternate]

@@oneminutecoder thank you for details...

[@kirandev]

put some moaning sound in next video please 🙏