hello everyone my name is Kyle and this is web dev simplified we make the web easy to understand and accessible for everyone in this video I'm going to be going over JSON which is one of the most important concepts that you can learn as a programmer or as a web developer I'm going to be going over what JSON is why you should know it and all the syntax involved the JSON and at the end of the video I'm going to go through examples of JSON so make sure you stick around till the end JSON also
known as JavaScript object notation is simply a data representation format very similar to XML or yamo it's used widely across the internet for almost every single API that you will access as well as for config files and things such as games and text editors like vs code and many many other places throughout programming it's used because it's extremely lightweight to send back and forth due to the small file size it's easy to read compared to something like XML since it's much cleaner and there's not as many opening and closing tags to worry about and it
also integrates very nicely with JavaScript since JSON is just a superset of JavaScript which means anything you write in a JSON is valid JavaScript so it integrates nicely with JavaScript which is used all throughout the web for front-end or back-end of levitation also almost every single major language has some form of library or built-in functionality to parse JSON strings into objects or classes in that language which makes working with JSON data extremely easy inside of a programming language throughout your programming career you're going to use JSON all the time whether it's creating an API consuming
an API or creating config files for you to use or for other people to use for your application now that we understand what JSON is and why it's important let's dive into some of the syntax involved to JSON by starting by talking about the types that JSON can represent as we know if JSON is a data representation format so we need to be able to represent a certain data types within it and JSON natively supports strings numbers and these numbers can be in any format whether they're decimal numbers whole numbers negative numbers even scientific notation
numbers it supports boolean's which can be either true or false it supports null which essentially stands for nothing a raised which can be a list of any of the types that we've talked about plus the next type which is the final type of object an object is the most complex but most used type within json and it allows you to represent values that are key value pairs so you give it a key and then a value and that value can be anything of the other types we've talked about so string number boolean array no any
of those different types can be the value for a key so let's dive into an example of how to use json inside of a file the first thing that you need to do is to create a file with the dot JSON extension at the end of it that's dot JSON at the end of your file and that will create a JSON file inside of this JSON file what you do is you take one of the types that we talked about and you put that inside of the file so for example you could put a string
you could put a number a boolean whatever type you want inside of that file and that's valid JSON but if all you have is a single string or a single number it's really not very useful to have a whole file for that single input so what most of the time when you're working with JSON you'll have either an array or an object as your top level of your file and then inside of that array or object you'll have other values so it may even have other objects have other arrays or even just individual values such
as strings or numbers inside of that so let's take an example of a user object that we want to put at the top level of our JSON file which we're going to call user JSON to create an object we need to use opening and closing curly braces and then inside of that we'll put all of the key value pairs that make up our object and every single one of these key value pairs the key must be surrounded by double quotes followed by a colon and then the value for that key and then if we have
multiple key value pairs we need commas separating every single one of our key value pairs similarly to how we would create an array in a normal programming language so for example if our user has an we would surround that name key in double quotes put a semicolon after it and then we would put the value of our name inside of double quotes as well because it's a string and it must be in double quotes and then at the end of it we'll put a comma because we have other key value pairs for our user for
example if we wanted to use a favorite number as another property we will put favorite number in double quotes followed by a semicolon and then put that users favorite number then if we wanted to use a boolean we use a comma and then another property we would use is programmer as our key put a colon and then we would put either true or false with no quotes around it to signify that this is a boolean and not a string so we would put true or false depending on if that user was a programmer or not
we could then go down and use hobbies as our next key value pair so put hobbies and double quotes semicolon and then to create an array we use opening and closing square brackets and inside of the array we put whatever type of value we want and in this case we're just going to use strings for the different hobbies so we'll put those strings inside of double quotes and we'll put commas between each one of them because we put commas between all the values in an array or writing out JSON next we could have another property
that will be an array of friends but instead of putting strings inside of this array we're going to put more user objects inside of that array so we can put different user objects inside of that array and now we have nesting of arrays with objects and that's how you really get into the power of JSON where you can start to deeply nest different properties and really show a hierarchy of data as opposed to just a flat format of data like most data format files give you so for example for this friends array we could have
a friends array and it can have the same properties of main favorite number is programmer hobbies and even friends inside of that and you can start to get a very deeply nested array if you really want it then we just have to make sure that we don't put a comma on the very last property value key pair that we have closed it with a curly brace and that's our full JSON file created now that we understand what JSON is and the syntax involved with writing JSON I'm going to jump into example of me writing JSON
file and then parsing that file in JavaScript so I have Visual Studio code open and I'm inside of a file called companies dot JSON where we're going to store an array of different companies and each of these companies is going to have a name number of employees a CEO and their rating out of five so let's get started by using our syntax for creating an array which is to use an opening and closing square bracket and inside of this array we're going to store different objects so our first object is going to be our first
company which as we mentioned has a name and we're just going to give that company a name of a big corporation and then we put the comma at the end of the row we want to give it number of employees as well and then this number of employees for this big corporation we're going to say that they have 10,000 employees then we want to give them a CEO and their CEOs name is going to be married and then lastly their rating out of five stars is going to be a 3.6 and now we want to
store a second company in this array so we just put a comma at the end of our first company object open up a new object and then give it the same properties so we'll say your name and we're just going to give this one the name of a small startup go down to the next line we got number of employees in this case they're just going to have three employees since they're a small company CEO is next and this company does not have a CEO because they're so small so we're just going to put a
null here which is okay to have different types inside of your JSON object because JSON doesn't care what types your different keys are they just matters that you have keys and values so we have null here and then lastly we're going to give them a rating make sure to put that in double quotes and their rating here is there's going to be 4.2 or 4.3 and there we go that is our entire company's JSON object and as you see we have no errors but if we for example didn't put the quote here you see that
we get an error and that's because we're using vs code and it tells us when we have errors instead of our JSON so we know that our JSON is always going to be correctly formatted just like this is here now it's looking up this index.html file here which is just a super simple file that has an opening script tag that we can put some JavaScript in here to run on our page so what's create a variable we're just kind of call it companies and we're going to copy everything from this company's JSON because as I
mentioned at the beginning of the video JSON anything in JSON is valid JavaScript so we can take this JSON directly and just paste it in to our company's variable and then if we go down here we log the company's variable and we check that out instead of our browser here as you can see we have blogged this company's variable and we have both parts of our array we have CEO name number of employees rating and all of this is the information that we have in this file here that we copied over into our JavaScript file
and same thing now here we have our other company but most of the time when you're dealing with JSON you're going to get it back as a string and not as an actual JavaScript object so to emulate that will surround this and back text so there's an actual string and if you save that you'll see that now our console just has a string instead of an actual object and we can't actually use this object inside of our JavaScript so in order to convert this JSON string into a JavaScript object we need to use what's called
json dot parse so if we go down to our log and we say json dot parse and we pass it in a string it'll take that string and convert it into a JavaScript object so now as you can see in here we have our JavaScript object that we created from this string here using JSON dot parse to get a JSON object right here and we can use this inside of JavaScript for example if we wanted we could get the first company inside of that array and we could get their name and now if we say
that you'll see it prints out the first company's name okay second company's name prints it out and so on and you can do anything that you could do with a normal JavaScript object to this newly parsed JSON object that we created with JSON dot parse so I hope this video was useful for you as you can see the actual format for JSON is fairly straightforward you just have to mostly remember to use double quotes around all of your different keys because in JavaScript you don't need the double quotes but in JSON you do need these
double quotes other than that it's very straightforward it's easy to read which is great because just looking at this you can tell what it's representing and you can tell what the different keys and values mean and it's extremely lightweight so when you send it across the internet through different api's it'll take up a very little amount of space which means it'll quickly send back and forth which gives your user a great end experience so thank you guys very much for watching you now know everything you need to know in order to use JSON and consume
JSON in your future projects if you guys enjoyed this video please like surely leave me a like down below letting me know and subscribe for more tutorials similar to this also let me know down in the comments below what other style tutorials you'd like me to cover similar to this one and as short as manner as possible thank you guys very much for watching have a good day
