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

Hey guys, welcome back to the other video. In this video we are going to talk about

json

or

json

, however you want to pronounce it. I will use json, it is one of the important concepts that you should

learn

if you are a programmer or As a web developer, we will see what json is, how to write them and use them in our projects, so in the next few

minutes

I will show you everything you need to know about json in one go. very simplified way. If this sounds interesting then watch the video till the end also make sure to subscribe to my channel and hit the bell icon so you don't miss out on videos like this so let's get started right let's start with the simple question what is json?

So json means javascript object notation. very similar to JavaScript object literals and is also the subset of JavaScript, it is the data representation format like xml and yaml, but it is popular due to its light weight and smaller size compared to xml for exchanging data. Json describes itself and that is the reason why it is easy to read and write json, unlike xml we don't have to deal with many closing and opening tags. json is widely used on the internet to exchange data between client and server in the form of API and is also used for configurations 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 a json parser.

Let's see what are the data types 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 in double quotes hello world and the page also supports numbers and can use integers, decimals, negative numbers and also supports scientific notation numbers, next data type we have boolean and boolean can take true or false as value the next data type is arrays so arrays are the list sorted that starts the index with zero, so in the first array you can see one, two, three, it is an array of numbers. and the second is html css and javascript is an array of strings and is unwrapped in square brackets the next type of data we have objects and objects are the most complex type of data to represent but most useful and objects are represented with a key and a pair of values ​​enclosed in curly braces, so in the example you can see that we have a name with double quotes and colon and then again we have double quotes and a value as string, the next data type is null and null we usually use it when we want to represent empty values ​​or null values, so to write a valid json there are certain rules that we must take into account.

The first is that the json file must always end with the dot json as the file extension. You can see in the example that we have users.json. Next, always represent a data in json as a key and a value pair where you enclose the key in double quotes and represent the value with one of the valid data types that we saw in the previous slide, then separate multiple data with commas at the end and braces contain objects while curly braces contain an array. Let's take a look at what a json file looks like with an example of json data.

Well, first we start with a couple of keys below. let's add a string value. I'm using the name as the key in double quotes separated by a colon between the value and now the value is a string, so we'll use double quotes to represent the string now that I've added the age and the value. of age will be a numeric data type similarly I can add a boolean like is the programmer so the programmer is the key and the value is a boolean data type and this person has skills so these skills they are represented by a series of strings so we have html css and javascript as skills and these are wrapped in square brackets to make it an array of strings and the last one we have an address which is represented by an object and we have city and state as key and the values ​​mumbai and Okay, now let's jump into the code and look at some of the examples.

Ok guys, now I have a simple html document here and the next thing we are going to do is create a json file. What I'm going to do, I'm going to create a new file and I'm going to name it users.json, so make sure that if you want to create a json file, you need to give it a dot json extension so that in my Visual Studio code I can see that when I add the dot json extension automatically I get an icon with braces that represents that it is a json file, so now in the json file if you want to write a valid json and you start with a couple of curly braces so you can see now I have a pair of braces, I'll just zoom it in a little bit so you can see it better and the next thing is we need to have a key and a value as a pair so how can we have double quotes we have a key we have a colon and then we have in the pair codes we have the value and if we want to have the multiple keys then we separate it with a comma and then we again write a new key and again give a new value, so this is a valid json, so let's create the user here, so what I'm going What to do I'm going to give it a name and the value would be the malvia page, okay and then I'll go. to give an age and the age would be a number so we won't have double quotes here so I'll just type 29.

Okay next I want to give a boolean data type so I'll give a new key and I'll type is programmer and I'll go to write a true value as. You can also remember that this is very similar to javascript object so let's see what happens if we don't give the codes here then it's going to give an error so if I put it here you can see that the property keys should be enclosed in double quotes if are adjacent then the key must be in double quotes so it won't accept if you don't put the double quotes it will give you an error so this is also a valid javascript object so what I can do is go to my file html and in the html file I can show you something about how you can access the keys and the values, so I'm going to have a script tag here okay 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 no. I get any errors and this can be treated as a simple object literal and now if I want to access this I'll just write a console.log file and add a user and let's see what we actually get when we log in to the console. the user, so to see the console log, I'm going to do a watch item and in the watch item I'm going to click on the console section, I'm just going to zoom this in so you can see it better, okay? so now you can see that I have printed the name of the object, uh, it's programmer and age as properties and values, and now if I want to access the name, I just need to do a dot and then I can have the values, so if I do one point you can see I'm getting age hints it's 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 programmer then it will give me a true value.

This is a very simple json, so let's add some more values. I'm going to add skills so that the skills are an array and it's giving me an error because I haven't put the double quotes here so I'm going to add double quotes and here I'm going to have html css and java script and I'm also going to add an address so that the address is an object and the key is the city in the city. I'm going to add mumbai okay and the state and for the state I'm going to add mh okay let me add the country too so I'm going to add the country and the country is going to be India so I'm going to save it and now we're going to try to access all of this. object here again so let me copy and paste it here so now let's see what we get and the user to get the entire object back into the user and this time if I want to access the skills, I'm going to make a point and we can have skills and if I access the skills I will get the entire array and if I need to access a particular element in the array I can access it with the index so if I make index 0 I will get html, if I make index 1 I will get css and this way you can also add access to the address so if we make the address and then we can add a point and then city then if we add the city we will get Mumbai and if we change it to a country then we will get India.

Alright guys, this is what we have done: we have taken the cleat json into a JavaScript variable. and then we're trying to display it, but let's use the uh json data directly using a search api uh, so what I'm going to do, I'm just going to delete this for now, okay, and then we'll do a search so you can use a fetch or the ajax call to make a call and get the data you're actually going to do when you actually build the projects so you need to call an API and retrieve the data from the server and then retrieve the data from the server. actually display the data in your UI or in your html so we will call users dot json and I need to add the codes here okay and this will return me a promise then I will add a response and this response will give me a I need to remove the json so I'm going to do a point json and this is going to give me a promise again and this is going to have a json okay and then I'm just going to print the users here so I'm going to print the json here and I'm going to save it so now you can see we get the same object uh, but this time we're not coding it in our javascript code, we're actually calling the json and if I want to see that, then we can go to the network and in the network let me update this, let me zoom out, you can see that's in actually in a call and the call and the type is fetch and it is actually retrieving the data so in the headers you can see that I made a get call and using the get call I am retrieving the data and the type data is the json of the application so here you can see it is a json of the application so it will give me a data json and if I go here and do a preview or in the response you can see that I have a response

complete

, but this is a single user object, but in real life I will not get a single user object, I will get a list of users, so let's create a list of users to create a list of users.

I'm still going to have an object first starting with a pair of keys and the key would be users users and it's going to be an array because it's going to contain multiple users and each user is going to be a type of object so I'm going to have multiple users here and let me have this is my first user and I'm just going to take this data and put it here so now you can see this is a single user block so now this way we can create multiple users so let me add one more user here so I'm going to copy and I will add one more user.

I'm going to change the value to nikkei. I am going to change this curve and he is also a programmer and knows databases so I am going to db2 and here I am going to do mongodb and javascript and he lives in Delhi and this will become dl and it is india. and let me add one more user so we have three users and this will become amit and this will become quilt 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, so now we have three users and now let's find these three users in our html or in our javascript code, so I'll save it if I go to the console, you can see that now I have one user. as key and the users value is the array itself and now if I expand this I will get three elements and the first one is and it's actually an object the second one is an object and the third one is an object so it's an array of objects and from each object you can see the address and all the things, so now if you want to access this, what are you going to do?

You can do dot, you are going to use users users, if I make users, I am going to get all the users and now if I want to access the first user, first I will have the index and we will have the first user and in the first user, if I want to access the address, I'm going to to do a dot again and I'm going to do the address and I'm going to get the address and similarly you can use dot so if you want to traverse your json and get the values ​​you need to use dot and use dot From done, you can traverse your json object, so let me print all the usernames.

So what I'm going to do, I'm just going to create a ul, an empty list, and in the empty list, what I'm going to do, we're going to loop. first we have a dot json users dot for each one okay and for each one I'm going to have an individual user and once I get the individual user what I'm going to do is create a variable here so let me create a list let equals a empty and I'm going to give a list more equal to. I'm going to create a string literal using backticks and I'm going to give a li and inside li what I want, actually I want the user dot so let me get the username and then I'm going to close this li again and after that, what I want to do is make a document by making a query selector so document.getqueryselector and I'm going to provide the ul and then add the inner html so if notyou know this document.queryselector and the inner html, check out my JavaScript

crash

course

so you can

learn

all these JavaScript things in my

crash

course

, so the inner html and that inner html will be equal to my list, and if I save it, I actually choose the names from my json and then have displayed those values ​​in my, so this doesn't match.

Actually, this should be the json user list, so what am I going to do, I'm just going to change this to user, okay, so this is the user list and one thing I want to show you here is that sometimes what What happens is you actually send the data in the form of a json string so you need to string your entire json and what you can do is let me show you how you can do that so I'll just comment on this for now we don't. I want this now, okay, I'm just going to create a new list here, so I'll have users here, okay, and in users I'm going to use this whole object, so I'm going to copy and paste this here, okay, and now if Make a user from console.log and then I will get the entire users array.

This is the object we have in our javascript code. We need to send this object to the server and the server is waiting for it not to be in the form. of an object that expects a string or a json string, so how do you convert this object to 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 the object you need. e5 string and if I save this now, then you can get this whole uh string and if you want to see if it's a json or not, then let's see, you can go to the json editor, okay and I'm going to paste this here.

I'm just going to increase this and now if I copy this, you can see that it's actually an object and this string you send to the server and when the server sends back a response, you'll get this entire string. back but you can't use this string to display the value you need to convert this string to the javascript object so how can you convert this back and I will show you how you can convert this back so now I have this string and if you want to return to convert this string, so I'm going to give a user string, so I guess this user string I received from my server, okay, now I have this

complete

string and now what I have to do is I have received it. the string from server i need to convert it 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 am going to use parse and inside the parse i am going to give my string username 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 loop through it and display the data on the screen. This stringify and parse are two important functions that you should remember because they will be the most used when you actually build the projects. I'm going to show you one more thing, so let me get rid of all these things that I don't want these things anymore, so we go back to our recovery code and you can see that we've actually displayed the list, so now I'm going to make an actual API call to show you how you can try, so there's a. website called jsonplaceholder so let me increase this so that this website is a json placeholder that gives you the fake apis.

In fact you can do some testing of your code and you can get the json. You can display the json and you can play so that you have a lot of resources, you have posts, comments, albums, photos, things to do, so let's use this to do and get all the data, so what I'm going to do, I'm going to use this URL , okay, and I'll use the URL here. Alright, this study URL is going to return me the list of all the to-dos, so let me console this to-do list first, so I'll console everything here and just make a comment here.

Okay, now if I save it, I get the list of all the pending tasks and these are the actual pending tasks that we received from the server, so if we go to the network tab, we can see that there is an API. call placeholder json and in placeholder json, okay, so you get all the data here, now let's create this to-do list, so what I'm going to do is, uh, I'm going to change this to tasks to-do list okay so this becomes a to-do list again and this time what we're going to do is uh I don't want this and it's going to be Jason Dot let's see what it actually is so I'm going to go into the console and it's going to give me an array so it's json dot for each one and for each task we need to do let's show the title just so the tasks have a title and we'll show the title of the pending tasks so let me add here and if I save you can see that this is the to-do list so this is a long to-do list guys this is all about json you know how to string json you know how to pass json. you know how to send the json to the server, you know how to retrieve the data from the server and you also know how the data is actually displayed on the screen so I hope you like the video and you understood everything about Jason if you have.

Any questions you can ask in the comments I will answer them immediately and I hope you like the video. A thumbs up is appreciated. You can also connect with me through Facebook or Instagram. I'll add the links in the description below and guys, don't forget. to subscribe to my channel and press the bell icon so that you can watch these interesting videos on web development and you can learn web development as quickly as possible and in a very simplified way, thank you for watching.