Learn JSON - Full Crash Course for Beginners

[@WebDevSimplified]

Thank you Free Code Camp for sharing my JSON crash course video. If anyone has any questions or comments let me know by replying to this comment, and I will reply as quickly as possible.

[@januwee6356]

Web Dev Simplified how do i access the json file from js without putting the same json to a variable?

[@WebDevSimplified]

@@januwee6356 It depends on how you are using the JavaScript. If you are running a server with Node.js and want to access the file on the server than you would need to open and read the file with fs. If you are running the JavaScript in the browser then you cannot access the file directly since it lives on the server, so you will either need to read it form an API or you will need to send the JSON to the front end JavaScript from the server. In the latter option the server will be the one that reads the file, and then just sends it to the front end.

[@januwee6356]

Web Dev Simplified okay thanks. I enjoyed your video :) Instant sub to your channel.

[@WebDevSimplified]

@@januwee6356 Thanks for the support! I really appreciate it.

[@kevyyar]

What scenarios or real world examples can this be applied? I would love to watch a live example of real world use in a tutorial. I'll check out your channel.

[@nordicdev-jmk]

Watched and Practiced with Him, My Concept about JSON is Fully Clear Now.

[@WebDevSimplified]

I'm glad I could help.

[@balajig7011]

worthy 12 minutes in a day

[@WebDevSimplified]

I'm really glad you enjoyed it!

[@thiagosilvafarias]

Just an observation. On 9:45 you used backticks ( ` ) also known as a grave accent (what is not the same of a single quote). This is called Template literals, both quotes and apostrophes can be used safely without any sort of extra escaping or consideration. Template literals provide multi-line support as well.

[@lank_asif]

Thank you for the noob friendly tutorial that explained the subject matter very clearly. I love this channel and what it represents.

[@WebDevSimplified]

Thanks. I focus on trying to make videos that people of all levels of experience can understand, since learning web development is challenging enough as is.

[@lank_asif]

@@WebDevSimplified Well I, and others, are very thankful for your efforts.

[@WebDevSimplified]

@@lank_asif I am incredibly thankful to have amazing people like you watching my videos.

[@lank_asif]

@@WebDevSimplified I can honestly state that is is our pleasure. Cheers, friend.

[@deminouk8347]

Lank Asif I love noob friendly

[@AVINASH__SHARMA]

small correction at 1:04 json is subset of javascipt not superset!

[@codenameFourtySeven]

Top Effort! I learnt everything I need to about JSON! Legend

[@luisf7105]

Thank you sooooo much for this upload, it was really helpful... Only thing , you were confusing me with semicolon (;) colon (:).👊🏽

[@klajdipepa2654]

I'm constantly trying to find more time to watch videos from this channel!

[@gregfletcher7514]

Great beginners guide! Thank you!

[@WebDevSimplified]

You are very welcome!

[@BryantCabrera]

Thank you for this crash course! Btw, you are so handsome 😍

[@WebDevSimplified]

Thank you and thank you again. You are too kind.

[@PaulMihail]

Your videos are amazing! Please keep up the good work!

[@dennisbunarta1190]

I love this guy!! God bless him!

[@1234mohitmhatre]

Dude Thanks Great Video finally I understand json a huge thumbs up to you bro

[@WebDevSimplified]

Thanks! I am really glad the video was able to help.

[@ndrakeb8926]

JSON concept is clear now. Thank You for simplifying :)

[@666222333111]

Saved, going to have a look later. :)

[@WebDevSimplified]

I hope you enjoy it!

[@chargoy9178]

Great video, simple and focus. Thanks

[@WebDevSimplified]

Thanks you!

[@samuelosoba]

very useful! simple and straight forward.

[@WebDevSimplified]

Thank you!

[@leo_nidas]

Extremely helpful! Thank you!

[@pratham5746]

Definitely worth 12 minutes instead of wasting time and doing nothing

[@dakshamdev]

{ "name" : "This Video", "rating" : 6, "like" : true }

[@thecube0293]

{ “message”: “Yeah you are right”, “rating”: 10, “like”: true }

[@ramankumar41]

Thanks dude great work !!!

[@ankitvashisht7350]

Very good explanation.love it 😘

[@WebDevSimplified]

Thank you!

[@ankitvashisht7350]

@@WebDevSimplified I also subscribed your channel. It also has great content 😘😍. Thank you so much ! 🤗

[@mohammadahmedragab837]

thank you so much, simple, concise , excellent explanation of JSON :)

[@udhayasankar113]

Excellent explanation...

[@WebDevSimplified]

Thank you!

[@joep1131]

very very good to the point and clean and short thanks

[@jrobinsam]

Could have included JSON.stringify explanation too...Good work..!!

[@WebDevSimplified]

Thanks! JSON.stringify is a really useful function, especially for debugging, but I wanted to keep this course as light as possible on the JavaScript, since the main purpose was to learn JSON. I only included the JavaScript section to showcase how JSON can be easily used in any language, especially JavaScript.

[@chavakahana8237]

Thank you - your explanation is clear and very helpful

[@stephenoshaughnessy2279]

Now that we've gotten to fetch in your javascript course, I need to get JSON experience.

[@utcca7758]

Jason! Jason! Json! Haha good explanation video.

[@WebDevSimplified]

Thanks. I feel like all web development names and acronyms are quite unintuitive in how they should be pronounced.

[@rajesht9702]

Thank you So much @Web Dev Simplified

[@linhang3942]

tks for explanation !

[@WebDevSimplified]

You are welcome!

[@brandonguerrero9485]

You meant to say colon after the key values I think. I got it though no worries!

[@WebDevSimplified]

Yeh. I realized that when I was editing the video, but didn't want to re-record and edit everything to fix it. I'm glad it didn't trip you up.

[@fafelo30]

very useful, thanks

[@md9936]

thanks a lot for share great video man!

[@milankbudha]

freecodecamp and web dev simplified are best

[@SubhanAli-mb4ny]

nice video dear.... thanks

[@WebDevSimplified]

You're very welcome.

[@HasithaSameeraNova]

Well explained. Thanks!

[@WebDevSimplified]

You're welcome!

[@rohittanwer8126]

Hmm.... One more nice video. Ok gonna see it now

[@WebDevSimplified]

Thanks! I hope you enjoyed it.

[@glgeorgiou]

Very interesting introductory video. How can i link and call an external json file instead of importing into the .html file?

[@WebDevSimplified]

This would be done most likely through an API which will return JSON data. Another way would be to tell your server to set a JavaScript variable before rendering the page so you have access to the JSON on the client.

[@electricaura_1]

Thanks bro!

[@Faizy_Ahmad]

Great Place to learn

[@sabuein]

Thank you.

[@d74g0n]

2:32 "undefined" ?

[@WebDevSimplified]

Undefined is actually not a valid JSON value even though it is valid JavaScript. You would need to use null instead of undefined for JSON.

[@reassume4826]

Thanks

[@WebDevSimplified]

You are welcome!

[@H76Pro]

Thank you :) Excellent explanation and easy to follow :) but I did get an error in the console when using json.parse "Uncaught SyntaxError: Unexpected token n in JSON at position 22"

[@molokomokubedi631]

Thanks!!

[@Albovsky]

Thanks for the video. Just one remark: even thought I got general idea about JSON one question remain unclear: why does it even exist in the first place? How do I use it in my project? What another options?

[@marcmesser6766]

Sending some data from the server to the client so it can be displayed on the web page or vice versa

[@predo2068]

Awesome video! Everything is comprehensive and It's a good start for beginners. 'Looking forward to next videos ;)

[@WebDevSimplified]

Thanks. I try to make all my videos focused on giving as much quality content as possible without being needlessly complicated.

[@RaghavKhullar]

Worth it!!

[@HumeraSheikh-s2p]

thank you

[@motivation_guru_93]

Hi What code editor do you use ? Is it ATOM or Sublime ?

[@danishfaridi8564]

Worth the time

[@easirmaruf7061]

just awesome

[@WebDevSimplified]

Thank you!

[@ackukoyi]

Would you happen to have any more tutorials on JSON? If you do, please send me the link. Thanks. Ade

[@eduarduskresnapurnama2113]

Is json is a new way to write javascript? So why we must write with .json, why not write that syntax on .js?

[@freecodecamp]

json is not a new way to write JavaScript. It is a method of formatting data that is often used in JavaScript. You can create it in a .js file.

[@carmelomotolese287]

New series? So goooood :)

[@WebDevSimplified]

I have a full series of videos similar to this video where I breakdown a topic in as short amount of time as possible. The CSS crash course on the freecodecamp channel is another example of one of my videos of this style. Check out the playlist on my channel.

[@Sage16226]

great video

[@WebDevSimplified]

Thanks!

[@esra_erimez]

By the way, YAML 1.2 *is* a superset of JSON.

[@WebDevSimplified]

Interesting. I I have been using YAML for awhile now and didn't realize it could parse JSON as well. The syntax is so dissimilar I just assumed they were differnt.

[@esra_erimez]

JSON syntax is a basis of YAML version 1.2, which was promulgated with the express purpose of bringing YAML "into compliance with JSON as an official subset" From: yaml.org/spec/1.2/spec.html "The primary objective of this revision is to bring YAML into compliance with JSON as an official subset."

[@WebDevSimplified]

@@esra_erimez that's really cool. Thanks for sharing. I've learned so much from smart people like you since I started making videos. I love it.

[@femaledeer]

It seems like copying the Json code without quotes and copying the json code with quotes and then parsing it, accomplished the same, so I don’t understand why you would want to copy it as a string.

[@WebDevSimplified]

The reason I copied it as a string is because if you read the JSON from a file, or an API it will be returned as a string and not an object. I wanted to show how to parse JSON that is in a string format since that is the most common way you will interact with JSON.

[@christooss]

So is JSON basically Python Dictionary in a implemented JS file? Learning both Web development and Python so I don't know how much these two things differ.

[@WebDevSimplified]

JSON is just a data format which is used to store data in a uniform way. A dictionary is another way to store data but it does not support complex data structures as well as JSON and is not easy to send or parse that data other than in the program it was written for. JSON is used mostly to send data between applications while dictionaries are mostly for within an application.

[@esra_erimez]

Interesting choice of hair style.

[@WebDevSimplified]

Thanks. I will take that as a compliment.

[@esra_erimez]

You're welcome. It was a compliment

[@smellthel]

Thank you br0ther

[@gmkhallyu]

Is there a way I can turn this information into a table for my website? It's mostly for my music collection so I have information about bitrate, file format, year released etc.

[@khaledabdelaziz357]

nice

[@WebDevSimplified]

Thanks.

[@thonglequang9795]

I run the code in VSCode but there is nothing in my debugger console. It said "No debugger available, can not send 'variables' ". Where is my missing extension in my VSCode ?

[@augischadiegils.5109]

❤️❤️❤️

[@stebbi1337]

Dude.... You are beautiful :)

[@kartikmalani7004]

Great!!!!

[@oksanahladushchak4076]

How do you open console in Visual Studio code for running html file? Thank you

[@nyubisensei1322]

I tried to show me my data in the browser, like in the video but for some reason its empty, the only thing that I can see is the Title. Any knows why ?

[@HumeraSheikh-s2p]

learn by doing

[@liamdavis492]

4:20 you mean colon, right?

[@ahmedthegreat3973]

Can I Use It To Save The Email A User Is Signed It Currently?

[@Enrish123]

I don't get that why don't you just make these objects with arrays and so on in your vanilla JavaScript? You are copying it anyway in the same form. Thank you for an answer. :)

[@Enrish123]

Is it just to have an overview of objects?

[@WebDevSimplified]

The point of the video is not to learn JavaScript but instead to learn JSON. JSON has a different syntax than JavaScript objects so I had to show how to make JSON in its own file. I then copied it over to show that JSON can be integrated easily with JavaScript and how you can convert from strings to objects.

[@Enrish123]

I see. Thank you :)

[@bernardwodoame9850]

Bro isn't there a way to get the Json by not manually copying the code?

[@HumeraSheikh-s2p]

Learn Json nice

[@ryanclemons1]

I watched this video then made a full AAA game.

[@rgby1367]

json is way easier than i thought...

[@aleezasmith392]

Hi sir,I am using datatable, but it is showing me datatable error json invalid response error

[@aleezasmith392]

How I can fix it please help me

[@speedlearner]

Can JSON be parsed by using Javascript? I know that XML can't be parsed with Javascript. If anyone wants to parse XML, they either have to use SQL or the eXist database. I hope you can answer my question.

[@gz3442]

make other json vs xml plz

[@hansjorgenclausen6437]

In the video you keep saying semi-colon, but you are showing colon.

[@dwiforex]

✅

[@NotImpossible]

and how we can bypass json login ,,, thank you

[@yahiabajbouj5688]

What is mean a crash ?

[@WebDevSimplified]

A crash course is a saying people use when talking about an introductory course that covers the most important concepts of a topic but does not go into super deep breakdowns.

[@johnweir3168]

This is a colon : This is a semicolon ;

[@ankitvashisht7350]

First view 😀

[@WebDevSimplified]

You beat me by quite a bit 😜

[@ankitvashisht7350]

@@WebDevSimplified yupp ! Approx 4 min. 🤣

[@sliceoflife5812]

Ayo that's my name

[@macknstyle]

semicolon(;) != colon(:)

[@cyborgdale]

You keep saying "semicolon" whereas you show (and mean) "colon". Please correct this.

[@mrgamerpug6248]

NICE NICE

[@poornarammohan2949]

hello

[@mrgamerpug6248]

Hi Hi..

[@stephennehemiah]

No Stack to Full Stack LoL

[@WebDevSimplified]

That is the hope 😜

[@tselgertenger8627]

10Q

[@HumeraSheikh-s2p]

test comment

[@sed4454]

the tutorial guy was a stoner

[@paulcurious2324]

"as a programmer or as web developer" - excuse me! :/

[@WebDevSimplified]

What is wrong with this statement?

[@paulcurious2324]

@@WebDevSimplified i really don't care if anything's wrong with it - just felt like creating a scene(lol)

[@ruthlessdestroyer9106]

Thanks