Learn JSON in 25 Minutes | Complete JSON Crash Course | JSON Tutorial for Beginners

hey what's going on guys welcome back to the another video and in this video we are going to talk about json or json whatever you like to pronounce i will be using json it is one of the important concept you should learn if you are a programmer or a web developer we will see what json is how to write and use them in our projects so in the next few minutes i am going to show you everything about json that you need to know in a very simplified way if this sounds interesting then watch the video till the end also make sure you subscribe my channel and press the bell icon so that you don't miss the videos like this one so let's get started all right let's start with the simple question what is json so json stands for javascript object notation very similar to javascript object literals and also it is the subset of javascript it is the data representation format like xml and yaml but it is popular because of its lightweight and less size as compared to the xml for data interchange json is self-describing and that is the reason it is easy to read and write json unlike xml we don't have to deal with lots of closing and opening tags json is widely used over the internet for exchanging data between client and server in the form of apis and also used for configs in various text editors like visual studio code sublime etc json also supports and integrates with almost all languages so it is language independent and most languages have json parser let's see what are the types of the data that json can represent as we know that json is a data representation format json natively supports strings and you can see the values as uh and wrapped in a double quotes hello world and the page it also supports numbers and you can use whole numbers integers decimals negative numbers and it also supports scientific notation numbers next data type we have the booleans and the booleans can take either true or false as the value next data type are the arrays so arrays are the ordered list starting the index with zero so in the first array you can see one two three it's an array of numbers and the second one is html css and javascript it is an array of strings and it is unwrapped with square brackets next data type we have the objects and objects are the most complex data type to represent but most useful and you represent objects with a key and a value pair enclosed in the curly braces so in the example you can see that we have a double quotes name and there is a colon and then we again have a double quotes and value as a string the next data type is the null and null usually we use when we want to represent the empty values or the null values so in order to write a valid json there are certain rules that we need to take care of the first one is the json file should always end with the dot json as file extension you can see in the example we have users.json next you always represent a data in json as key and a value pair where you enclose the key with a double quotes and represents the value with one of the valid data type that we saw in the previous slide next you separate multiple data with commas in the end and curly braces holds objects while the square braces holds array let's take a look how a json file looks like with an example json data alright so first we start with a pair of curly braces next let's add a string value into it i am using name as a key enclosed in the double quotes separated by a colon between value and now the value is a string so we will use a double quotes to represent string now i have added age and the value of the age will be a number data type similarly i can add a boolean as is programmer so is programmer is the key and the value is a boolean data type and this person has a skills so these skills are represented by an array of strings so we have html css and javascript as the skills and these are and wrapped with the square brackets so it is an array of strings and the last we have an address which is represented by an object and have city and state as the key and the values mumbai and mh all right so now let's jump into the code and let's see some of the examples all right guys so now i have a simple html document here and the next thing we are going to do is we need to create a json file so what i'm going to do i will create a new file and i'm going to name it as users.json so make sure if you want to create a json file you need to give an extension of dot json so in my visual studio code you can see that when i add the dot json extension i automatically get an icon with the curly braces that represents that it is a json file all right so now in the json file if you want to write a valid json and you start with a pair of curly braces so you can see that now i have a pair of curly braces i will just zoom it a little bit so that you can see it more nice and the next thing is we need to have a key and a value as a pair so how we do we have a double quotes we have a key we have a colon and then we have in the couple codes we have the value and if we want to have the multiple keys then we separate it with a comma and then we write again a new key and we give a again new value so this is a valid json so let's create the user here so what i'm going to do i'm going to give a name and the value would be the page malvia okay and then i'm going to give an aged and the age would be a number so we will not be having a double quotes here so i will simply write 29 okay next i want to give the a boolean data type so i'm going to give a new key and i will write is programmer and i'm going to write a true as value all right you can also recall that this is very similar to the javascript object so let's see what happens if if we don't give the codes here then it is going to give an error so if i hover it here you can see that the property keys must be double quoted if it's adjacent then it the key should be double quoted so it will not accept if you don't put the double quotes it's going to give you an error so this is also a valid javascript object so what i can do is i can go to my html file and in the html file i can show you something how actually you can access the keys and the values so i'm going to have a script tag here okay and and i'm going to create a variable i'm going to get a constant user and i'm going to use the same object here so if i use the same object you can see that i don't get any errors and this can be treated as a simple object literal and now if i want to access this i will just write a console.log and i'm going to add user and let's see let's see what actually we get when we console log the user so to see the console log i'm going to do a inspect element and in the inspect element i'm going to click on the console section i'll just zoom this for you so that you can see it more nice all right so now you can see that i have printed that object name uh is programmer and age as the properties and the values and now if i want to access the name i just need to do dot and then i can actually have the values so if i do a dot you can see that i'm getting suggestions of age is programmer and name so let me have a name here and if i save it i actually get the name value and if i need is programmer then it's going to give me a true so this is a very simple uh json so so let's add some more values to it i'm going to add skills so the skills would be an array and it's giving me error because i haven't put the double quotes here so i'll add double quotes and here i'm going to have html css and java script all right and i'm also going to add address so the address is an object and the key is city in the city i'm going to add mumbai okay and the state and for the state i'm going to add mh all right let me add country as well so i'm going to add country and the country will be india all right then i will save it and now we will try to access this whole object here again so let me copy and paste it here all right so now let's see the what we get and the user so we get the whole object again in the user and this time if i want to access the skills so i'm going to do a so i'm going to do a dot and we can have skills and if i access the skills i'm going to get the complete array and if i need to access a particular item in the array i can access it with the index so if i do the index 0 i'm going to get html if i do index 1 i'm going to get css and this way you can also add access the address so if we do the address and then we can add dot and then city so if we add the city we are going to get mumbai and if we change it to a country then we are going to get india all right guys so this is what we have done that we have actually taken the cleat json into an javascript variable and then we are trying to display it but let's use the uh json data directly using a fetch uh api so what i'm going to do i will just remove this for now okay and then we are going to do a fetch so you can use a fetch or the ajax call to make a call and get the data which actually you're going to do when you actually build the projects so you need to call an api and fetch the data from the server and after fetching the data from the server you actually display the data on your ui or on your html so we are going to call the users dot json and i need to add the codes here okay and this is going to return me a promise then i'm going to add a response and this response will give me a i need to get the json off it so i'll do a dot json and this is going to give me a promise again and this will have a json okay and then i will just print the users here all right so i'm going to print the json here and i will save it so now you can see that we get the same uh object but this time we are not uh hard coding it on our in our javascript code we actually call the json and if you want to see that then we can go to the network and in the network let me refresh this let me zoom out you can see that that is actually in a call and the call and the type is fetch and actually it is fetching the data so in the headers you can see that i have made a get call and using the get call i am getting back the data and the type of the data is the application json so here you can see that it's an application json so it's going to give me a json data and if i go here and if i preview or in the response you can see i have a complete response but this is a single user object but in real life i will not be getting a single user object i will be getting a list of users so let's create a list of users to create a list of users i still going to be having a object first starting from a pair of curly braces and the key would be users users and it will be an array because it's going to hold a multiple users and each user will be type of an object so i am going to have multiple users here and let me have this is my first user and i will just take this data and i put this data here all right so now you can see that this is a single user block so now this way we can create multiple users so let me add one more user to here so i'm going to copy and i'm going to add one more user i'm going to change the value to nikkei i'm going to change this the curve and he's also a programmer and he knows databases so i'm going to the db2 and here i'm going to do mongodb and javascript and he lives in delhi and this will become dl and it's india and let me add one more user so we will have three users and this will become amit and this will become duvet and i will change the h232 let me make this as false and you don't have any of these skills so this is going to be an empty array all right so now we have three users and now let's fetch these three users in our html or in our javascript code so i'm going to save it if i go to the console you can see that now i have a user as a key and the value of the users is the array itself and now if i expand this i'm going to get three items in it and the first one is and actually an object the second is an object and third is an object so it is an array of objects and each object you can actually see the address and all things so now if you want to access this what are you going to do you can going to do dot you're going to use users users if i do users i'm going to get all the users and now if i want to access the first user then i'm going to have the index first and we have the first user and in the first user if i want to access the address i'm going to do a dot again and i'm going to do address and i will get the address and similarly you can get using the dot so if you want to traverse the traverse your json and get the values you need to use dot and using the dot you can actually traverse your json object so let me print all the user names so what i'm going to do i will just create a ul an empty list and in the empty list what i'm going to do so we are going to loop first so we have a json dot users dot for each okay and in the for each i'm going to have an individual user and once i get the individual user what i'm going to do is i i will create a variable here so let me create a let list is equals to empty and i am going to give a list plus equals to i'm going to create a string literal using backtick and i'm going to give an li and inside the li what i want i actually want the user dot so let me get the user name okay and then i'm going to close this li again all right and after that what i want to do i want to do a document doing query selector so document.getqueryselector and i'm going to give the ul and then i will add the inner html so if you don't know this document.queryselector and inner html uh please check out my javascript crash course so you will learn all these javascript stuffs in in my crash course so inner html and that inner html will be equals to my list all right and if i save it then i actually pick the names from my json and then i have displayed those values in my so this doesn't match actually this should be json user list so what i'm going to do i'll just change this to user okay so this is the users list and one thing i want to show you here is that sometimes what happens actually you send the data in the form of a json string so you need to stringify your complete json and how that you can do is let me show you how you can do that all right so i i will just comment this out for now we don't want this now okay and i i will just create a new list here so i will have a users here okay and in the users i'm going to use this complete object so i will copy and i will paste this here all right and now if i do a console.log users then i'm going to get the complete user array all right now this is the object which we have in our javascript code we need to send this object to the server and server is expecting uh it not in in form of an object expecting a string or a json string so how you convert this object into a json string so you just need to add what i'm going to do you can use json dot stringify and then you can pass actually what object you need to string e5 and if i save this now then you can get this actually this complete uh string and if you want to see that this is a json or not then let's see you can go to json editor okay and i'm going to paste this here i'll just increase this and now if i copy this then you can see that this actually it's an object and this string you actually send it to the server and when the server gives you a response back you are actually going to get this whole string back but you cannot use this string to display the value you need to convert this string into the javascript object so how you can convert this back and i will show you so how you can convert this back so now i have this string and if you want to convert this string back so i'm going to give take a user string so i'm assuming that this user string i received back from my server okay so now i have this complete string and now what i need to do that i have received the string from the server i need to convert this into my js javascript object so in that case what you can do you can use instead of stringify this time you will use parse so i'm going to use parse and inside the parse i'm going to give my user string and i'm going to save it now you can see that the actual string is converted back to the javascript object and now using this javascript object you can actually loop through and you can display the data on the screen so this stringify and the parse are two important functions which you need to remember because these will be the most widely used when actually you build the projects all right i'm going to show you one more thing so let me get rid of all these stuff we don't want these stuff anymore so we are back to our fetch code and you can see that we have actually displayed the list so now i'm going to do a real api call to show you uh how you can test so there is one website called jsonplaceholder so let me increase this so this website is a json placeholder it gives you the fake apis you can actually do some testing of your code and you can get the json you can display the json and you can play around so it has a lot of resources it has posts comments albums photos to do's so let's use this to do and let's get all the data so what i'm going to do i'm going to use this url okay and i'm going to use the url here all right and this studio url is going to return me the list of all the to-do's so let me console this list of to-do's first so i'm going to console the whole thing here and i will just do a comment here all right and now if i save it then i get the list of all the to-do's and this is the actual to-do's we are getting from the server so if we go to the network tab then you can see that then there is an api call to the json placeholder and in the json placeholder all right so you get all the data here now let's create these to-do list so what i'm going to do is uh i am going to change this to to do's okay so this will become a to-do list again all right and this time what we are going to do is uh i don't want this and it will be jason dot let's see what actually it is so i'll go into the console and it's going to give me an array so it will be json dot for each and for each to do we need to have to do dot let's display the title only so to do's have a title and we will display the title of the to-do's so let me add here and if i save then you can see these are the list of to-do's so this is a long list of the to-do's all right guys so this is all about the json you know how to stringify json you know how to pass json you know how to send the json to the server you know how to get the data back from the server and you also know how actually you display the data on the screen so i hope you like the video and you understood everything about jason if you have any questions you can put in the comments i will answer you promptly and i hope you like the video a thumbs up is appreciated you can also connect with me via facebook or instagram i will add the links in the description below and guys don't forget to subscribe my channel and press the bell icon so that you can see these cool videos web development and you can learn the web development as quickly as possible and in a very simplified way thanks for watching

Channel: Dipesh Malvia

Views: 62,759

Keywords: json, json tutorial, what is json, json file, json crash course, json for beginners tutorial, json tutorial for beginners, javascript fetch, javascript for beginners, fetch api javascript

Id: 6OhMbf2v_jI

Length: 25min 26sec (1526 seconds)

Published: Tue Oct 27 2020