Learn JSON - Full Crash Course for Beginners
Learn everything you need to know about JSON in 10 minutes.
You will learn:
- what JSON is,
- why JSON is important,
- what JSON is used for,
- the syntax of JSON,
- and see multiple examples of JSON.
JSON (JavaScript Object Notation) is the most popular data representation format, and is one of the most important, and easiest concepts you can learn in programming. It allows you to create APIs, config files, and structured data. We will be covering all of the terminology, and going through live examples of all the different JSON types.
Tutorial created by Web Dev Simplified. Check out their channel for more great content: / @webdevsimplified
Twitter: / devsimplified
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: medium.freecodecamp.org
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.
Web Dev Simplified how do i access the json file from js without putting the same json to a variable?
@@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.
Web Dev Simplified okay thanks. I enjoyed your video :) Instant sub to your channel.
@@januwee6356 Thanks for the support! I really appreciate it.
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.
Top Effort! I learnt everything I need to about JSON! Legend
JSON concept is clear now. Thank You for simplifying :)
Watched and Practiced with Him, My Concept about JSON is Fully Clear Now.
I'm glad I could help.
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.
Thank you for the noob friendly tutorial that explained the subject matter very clearly. I love this channel and what it represents.
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.
@@WebDevSimplified Well I, and others, are very thankful for your efforts.
@@lank_asif I am incredibly thankful to have amazing people like you watching my videos.
@@WebDevSimplified I can honestly state that is is our pleasure. Cheers, friend.
Lank Asif I love noob friendly
thank you so much, simple, concise , excellent explanation of JSON :)
Your videos are amazing! Please keep up the good work!
worthy 12 minutes in a day
I'm really glad you enjoyed it!
I'm constantly trying to find more time to watch videos from this channel!
Thank you - your explanation is clear and very helpful
Extremely helpful! Thank you!
very very good to the point and clean and short thanks
Thank you So much @Web Dev Simplified
Dude Thanks Great Video finally I understand json a huge thumbs up to you bro
Thanks! I am really glad the video was able to help.
thanks a lot for share great video man!
I love this guy!! God bless him!
Thank you sooooo much for this upload, it was really helpful... Only thing , you were confusing me with semicolon (;) colon (:).👊🏽
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"
Great beginners guide! Thank you!
You are very welcome!
Thanks dude great work !!!
very useful! simple and straight forward.
Thank you!
Great video, simple and focus. Thanks
Thanks you!
Thanks so much for this video.
Awesome video! Everything is comprehensive and It's a good start for beginners. 'Looking forward to next videos ;)
Thanks. I try to make all my videos focused on giving as much quality content as possible without being needlessly complicated.
Saved, going to have a look later. :)
I hope you enjoy it!
Worth it!!
Well explained. Thanks!
You're welcome!
Now that we've gotten to fetch in your javascript course, I need to get JSON experience.
How do you open console in Visual Studio code for running html file? Thank you
Thanks bro!
Great Place to learn
Could have included JSON.stringify explanation too...Good work..!!
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.
Worth the time
Jason! Jason! Json! Haha good explanation video.
Thanks. I feel like all web development names and acronyms are quite unintuitive in how they should be pronounced.
Thank you.
Definitely worth 12 minutes instead of wasting time and doing nothing
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.
Thanks!!
Hi What code editor do you use ? Is it ATOM or Sublime ?
Excellent explanation...
Thank you!
freecodecamp and web dev simplified are best
Thank you for this crash course! Btw, you are so handsome 😍
Thank you and thank you again. You are too kind.
small correction at 1:04 json is subset of javascipt not superset!
tks for explanation !
You are welcome!
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?
Sending some data from the server to the client so it can be displayed on the web page or vice versa
Very good explanation.love it 😘
Thank you!
@@WebDevSimplified I also subscribed your channel. It also has great content 😘😍. Thank you so much ! 🤗
thank you
Thanks
Great!!!!
Very interesting introductory video. How can i link and call an external json file instead of importing into the .html file?
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.
You meant to say colon after the key values I think. I got it though no worries!
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.
nice video dear.... thanks
You're very welcome.
Hmm.... One more nice video. Ok gonna see it now
Thanks! I hope you enjoyed it.
New series? So goooood :)
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.
Can I Use It To Save The Email A User Is Signed It Currently?
just awesome
Thank you!
Thank you br0ther
By the way, YAML 1.2 *is* a superset of JSON.
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.
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."
@@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.
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.
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.
great video
Thanks!
{ "name" : "This Video", "rating" : 6, "like" : true }
{ “message”: “Yeah you are right”, “rating”: 10, “like”: true }
make other json vs xml plz
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 ?
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 ?
and how we can bypass json login ,,, thank you
learn by doing
nice
Thanks.
Dude.... You are beautiful :)
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.
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.
Learn Json nice
Is json is a new way to write javascript? So why we must write with .json, why not write that syntax on .js?
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.
2:32 "undefined" ?
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.
First view 😀
You beat me by quite a bit 😜
@@WebDevSimplified yupp ! Approx 4 min. 🤣
Interesting choice of hair style.
Thanks. I will take that as a compliment.
You're welcome. It was a compliment
❤️❤️❤️
NICE NICE
Hi sir,I am using datatable, but it is showing me datatable error json invalid response error
How I can fix it please help me
Bro isn't there a way to get the Json by not manually copying the code?
json is way easier than i thought...
✅
Don't you mean colon? You have : Semicolon is ;
I do. I didn't catch it until editting though and then it was too late to fix.
This is a colon : This is a semicolon ;
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. :)
Is it just to have an overview of objects?
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.
I see. Thank you :)
I watched this video then made a full AAA game.
What is mean a crash ?
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.
semicolon(;) != colon(:)
hello
In the video you keep saying semi-colon, but you are showing colon.
Hi Hi..
4:20 you mean colon, right?
Ayo that's my name
10Q
No Stack to Full Stack LoL
That is the hope 😜
You keep saying "semicolon" whereas you show (and mean) "colon". Please correct this.
test comment
the tutorial guy was a stoner
"as a programmer or as web developer" - excuse me! :/
What is wrong with this statement?
@@WebDevSimplified i really don't care if anything's wrong with it - just felt like creating a scene(lol)
Thanks
You are welcome!
test comment