JavaScript Tip: Loading a Local JSON File without Fetch

[@septimusforster]

God bless you, sir. You're one of the few finest KZbin instructors on JavaScript, including Kyle from WebDev Simplified and Professor Steve Griffith.

[@AllThingsJavaScript]

Glad to help! Thanks!!

[@NicoHeinrich]

This is exactly what I was looking for ... makes my code so much more streamlined!

[@AllThingsJavaScript]

Glad it helped!

[@junk1ord]

I've been searching for hours and ended up on this video. Thanks a million tons!

[@AllThingsJavaScript]

Glad I could help!

[@darrenlo1165]

This only works with Chrome. It does not work with FF just a heads up. If you try to run this with FF you will have issues and it will not load the array since FF does not support import assertions.

[@ahmedalsagir]

i can't stop watch 3 hour continuous, amazing

[@karlstenator]

Thanks for sharing this. I found this example to work well when using Google Chrome as the target, but when using FireFox - it reports; "Uncaught SyntaxError: import assertions are not currently supported".

[@AllThingsJavaScript]

Thanks for reporting that firefox doesn't support insertions yet!

[@ivangutowski-smith6514]

Thanking for saying you would link something in the description, and remembering to link it

[@abduljamadar9925]

I was looking for this solution from past 2 days. Thank you sir.

[@AllThingsJavaScript]

Glad it helped!

[@mikhailwebb8377]

Everything else seems to work for me now. BUT, I need the .json file to read as an object or variable like dictionary so i can process the data from it in Javascript. How can i store the data that is read into a variable like object? I need it to be able to read similar to how python read dictionaries

[@AllThingsJavaScript]

When the JSON file is parsed, it is a JavaScript object that you can work with. Perhaps these tutorials will help: kzbin.info/www/bejne/hpOQaXewdrSVo8k and kzbin.info/www/bejne/r4CZaIpqqalphrM

[@mikhailwebb8377]

@@AllThingsJavaScript Thanks for your reply. I resorted to using python to finish the implementation.

[@4estral]

At this time, Firefox still doesn't support assertions. Otherwise this works great.

[@umangternate]

I got "import assertions are not currently supported"

[@AllThingsJavaScript]

Are you running your files from a local server?

[@umangternate]

@@AllThingsJavaScript yes sir, I was using WAMP server. But I figured out that it was the browser. Mozilla FF does not support it currently. When I use Chrome, it ran smoothly.

[@madhavig5302]

Simple and Stright to the point. Thank you.

[@AllThingsJavaScript]

You're welcome!

[@ArvindMMittal]

Great! So simple.

[@cxkcxk-o6d]

So how do you resolve "Cross origin requests are only supported for HTTP."

[@AllThingsJavaScript]

It requires among other things changes on the server. Search resolving cross origin requests for lots of info on it.

[@abdullahkhurram9847]

still i have a problem : Uncaught SyntaxError: Unexpected identifier 'assert' (can you help???)

[@AllThingsJavaScript]

Can you provide a bit more information? Where is assert in your code? Maybe provide you code.

[@Erebor99700]

Thx, such useful info! Warmest greetings from Ukraine!

[@AllThingsJavaScript]

Glad it was helpful! Our prayers our with everyone in Ukraine.

[@_V__.]

Many thanks for this, I’ve sometimes wanted to try some stuff out using a mock data file i JSON format, but I’ve usually given up after getting that second error message. Now I know why it happens.

[@AllThingsJavaScript]

Glad it helped!

[@oreki1996]

newbie here! Is it possible to update the content of the JSON file?

[@AllThingsJavaScript]

The best way to update a JSON string is to convert to an object (JSON.parse) update the object and then convert back to a string (JSON.stringify).

[@oreki1996]

@@AllThingsJavaScript will try! thank you so much

[@jayantagarwal6339]

you really saved my day

[@AllThingsJavaScript]

Glad to help!

[@nyarlathotepthecrawlingcha969]

I have a question. How can I import data of a nested array in the JSON i have made a script to pull data from an SQL server, which works fine but outputs a file set like this [ [ { Objects } A bunch more objects ] ] And I've been using a script I've found to display it in HTML, but the script doesn't understand the nested array

[@AllThingsJavaScript]

Once you have the JSON data, you just need to access it like a normal array/object. See if this tutorial helps: kzbin.info/www/bejne/r4CZaIpqqalphrM Or maybe this one kzbin.info/www/bejne/n2PImGWuecedg5I

[@prinzadamz]

Thanks a ton 🤘👍

[@AllThingsJavaScript]

Glad it helped!

[@xc4945]

I got an error "Uncaught SyntaxError: Unexpected token ':' " for my json file

[@AllThingsJavaScript]

Looks like there may be an error in your code or file. A colon where it shouldn't be. Post if you need some help finding it.

[@TillmanTech]

Thanks! Excellent video. This method is great for when your app’s json data is on the same server as the app itself. No need to wait for the json. Promises can be avoided making coding easier/less complex

[@HollowsDarkness]

Then could you console.log(users.name) and it print out the ane of the users?

[@AllThingsJavaScript]

Once you load the JSON file you can access it like any JavaScript object. So you could console.log any data it contains.

[@HollowsDarkness]

@@AllThingsJavaScript gotcha then i must be doing something wrong lol, i can console.log the variable i attached the JSON to but if i try to do it grab the name or IDs from the variable it just comes back as undefined. I'll have to look more into it, thanks!

[@AllThingsJavaScript]

@@HollowsDarkness If you need to, post your code.

[@HollowsDarkness]

@@AllThingsJavaScript here is my code, import pokemon from './pokemon.json' assert {type: 'json'} let pokemonString = JSON.stringify(pokemon) let poke = [] // for (let p in pokemonString) { // poke.push(pokemonString) // } for (let i = 0; i < pokemonString.length; i++) { const p = pokemon[i]; poke.push(p) } console.log(poke)

[@JIucmuk]

thanks a lot!

[@AllThingsJavaScript]

Welcome!

[@АлександрШтыб-е5т]

Thank you very much! You helped me out

[@AllThingsJavaScript]

Glad I could help!

[@frechdaXchs]

does not work for me. Need to access a local json file without a (live) server or user input. Seems impossible...

[@AllThingsJavaScript]

For security reasons that is not allowed. A browser is not given access to files on your hard drive. As you can imagine there would be a lot of ways to use that against you.

[@darkknight7623]

thank you sir, it helps a lot

[@AllThingsJavaScript]

Most welcome!

[@roumen1669]

Thank you so much!

[@AllThingsJavaScript]

Glad it helped!

[@angelgarcia6911]

Thank you!

[@EmelieBoss]

great!

[@perdu0609]

Does anyone have an error "Cannot use import statement outside a module" ?

[@AllThingsJavaScript]

Did you set up your JavaScript file to be a module in your HTML file?

[@fayyu5506]

this is still giving cors error

[@AllThingsJavaScript]

Do a google search on cors errors for localhost. There is a lot of information out there.

[@MattiaRuberto]

Mind-blowing!!!

[@everestobot3934]

Local Filesystem Detected ! Put this to your header:

[@avertry9529]

Thanks, but your link to fetch, actually links to this video.

[@AllThingsJavaScript]

Thanks for letting me know.

[@mutamente]

pouts!! que montagem huahuahuahuauha muito bom xD

[@Assiel1]

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file///C:/XXX/app/js/app.json 🥲

[@AllThingsJavaScript]

What are you using for your local server? There may be documentation about disabling Same Origin Policy