Hello guys.
Good to see you back.
So finally we are in my Visual Studio Code editor.
So as you can see in my current working directory there is two file.
First one is index dot HTML and second one is first dot Json file.
Yes.
To create a Json file we need to use dot json extension.
So let's talk about the Json file.
As you can see our Json file start with curly braces.
As I told you, to create a Json object or store a data, we need to use curly braces.
Then inside the curly braces we have property and value.
And if you notice you can see all the properties are in double quotes.
So our first property is name and its data type is string.
Our second property is age and it is data type is number.
Our third property is married and its data type is boolean.
So that's why here I type false.
Our fourth data type is null.
So that's why here I type null value.
And if you do not pass any value by default it is going to take null.
Our second data type is array.
That's why here I store multiple results hobby dance soccer, cricket.
And our last data type is object data type.
To create object data type we need to use curly braces.
And inside the curly braces here we use some other properties pin country and state.
So this is the Json data that I am going to use in our JavaScript.
Basically Json is used to send data from the server to client.
That's why without server we cannot run Json properly.
Yes, you can run.
First you need to convert JavaScript object into a Json data.
Then you can run it without server.
But this is not a good process because in real life we do not use like that.
Now I want to use this Json data in our index.html file.
So let's jump into the index dot HTML file.
Here you can see inside the script tag.
Here I create a variable name request.
This variable is going to send a new Http request to our server.
Then our variable request dot.
Here I use open function and in our open function we have to call two methods get and post.
And here I use get method.
Then here we parse the source file means first dot Json.
This open function going to open the Json file from the server.
Then we use request dot send function and inside the round braces I provide null argument.
Here we use null value because here we do not send any value to our server.
Just want to get the Json file from the server.
Now from our server it is going to return a text response.
Then after get this text response, we need to convert the text response into a JavaScript object.
For that we need to use a function which is parse.
So here I create a variable var data.
Data means what we get from the Json file equal to and here I use a function named json dot parse.
Then inside the round braces request means this variable request dot response text.
Because as I told you, all the Json data are in text format.
This function is going to convert this Json data into a object and store it data variable.
Now if I print this data variable in our console dot log then we can read the data.
So let's open the file without server.
Here you can see I do not run my life server.
So I'm going to open this HTML file from the directory.
So if I open this HTML file from the directory, as you can see in my screen, it's shown nothing.
But if I show you my console and show you console section here you can see a lot of errors.
Because to run XML Http request we need servers.
So let's back to the Visual Studio Code.
Now I'm going to run the same file with Live Server.
So here you can see the option go live.
After press go live.
It's going to open my file from the server.
Now if I show you my console section here you can see the object.
If I open this object now you can see all the data from our object license, null address, hobby name,
etcetera, marriage status, all of these.
Now we convert the Json data into a object so we can access all of these properties one by one.
Also you can perform mathematical calculation and anything.
So this is how we use Json.
And if you want to access the data and particularly you want to print the name, just you need to type
data dot property name which is name.
If I save this file and back to my browser.
Here.
You can see in my console now it's print only the name add one.
As I told you, now it's completely a JavaScript object so you can do anything with it.
Just you need to remember Json dot parse function.
Convert Json text data into a JavaScript object.
At the opposite way.
If you want to convert JavaScript object into a Json text data, in that case you need to use json dot
Stringify method.
Let me show you.
So here I'm going to declare another variable where and our variable name is obj.
It's an object object equal to.
Inside the curly braces.
Our first property is name name.
Inside the double quotes add one.
Our second property is age.
Inside the double quotes.
Otherwise I'm going to use numeric value.
So we don't need double quotes 30.
And our third value is city.
City.
And inside the double quotes city is New York.
So this is a JavaScript object.
Now we need to convert this JavaScript object into a Json string.
For that I'm going to declare another variable where and our variable name is my Json.
And as I told you, to convert JavaScript object into a Json object into a Json data, we need to use
json dot Stringify method.
So I'm going to type json dot stringify.
Then inside the round braces we need to pass the object name, which is obj and semicolon two in this
line.
And now I'm going to print this Json data.
Otherwise text in my body tag.
So here I'm going to create a div tag.
Now I'm going to take a paragraph tag p.
And I'm going to assign a ID to this paragraph ID demo.
Then.
And now I'm going to use Dom to print the Json data in my paragraph tag.
So here I'm going to type document dot get element by id inside the round braces or ID name is demo.
Dot I want to set inner HTML inner HTML equal to my Json and semicolon to in this line.
So if I save this file and show you my browser.
As you can see, it's not working because we need to move this script tag below then paragraph tag.
So I'm going to cut this portion, and I'm going to move it below the paragraph tag and save this file
again.
Now if I show you my browser you can see the result.
As you can see it, print the text data as it is.
And if you notice, you can see it's a Json data because it is inside the curly braces.
Also also for properties, name it use dual quotes.
So this is how we can use Json in JavaScript.
We are going to learn more about it in our upcoming tutorials.
So don't worry when we learn about Essex and rest API json play the key role.
So thanks for watching this video.
Stay tuned for our next tutorial.