Hi, and welcome in this video, in this series, I'm going to take you to the next step in web development. You have a standard HTML, CSS and JavaScript. And you can build a dynamic web page using JavaScript. So one of the JavaScript methods is JSON. json is a text which written with JavaScript Object Notation. So Jason is short for JavaScript Object Notation.

So before we see the syntax for JSON seriously let we review how to make an array and access to the index inside the array and how to make an object and access to any element inside the object. So to make an array just define a variable and for example, call it names. Within the square brackets, just type it and cherish the value which is Example and then the second value also. So, now I want to get the second value also within this division, so between first access to the division, so we want to get the second element. So it will be the name of the array and then the index one nice which will now make an object. So this object will be for example about identity.

So variable identity and equal to curly brackets and then the key and the volume. So for example, name and the value within double quotes and comma, the second key age, then you get to three. Finally, to make that last one about gender that's when I'll try to get the gender value. So to do this, just then over the object identity, that the name of the key, so gender Shall we Yes. We can Add another object. And for example make it hobbies.

And habits is an object that contain just a symbol like this so you can understand it well. so obvious maybe is and sports is an array that has two values. The first one is football and the second one is swimming and then art and just has one value drone. But let me spread them was come up so in If I want to adjust to the arts, so identity then is the arts. But bear in mind we use uppercase a little natural to merge between the array and the object. I will make an object and call it also identity, variable identity and it will be an array and contain two objects, one for someone called Pac Man and another one for someone called Alonzo and contain some information about each one of them.

So, the first object has a name for someone called Achmed is age Less than good to me, his hobbies and habits is an object. So sports like this literally copy this and arts Allah to make another one for someone called Alonso so here are an array that contains two objects. The first one contains 40s and others contain two keys. One of them is an array the to try now to access to, for example, sports in the first argument So, that will be the name of the array, which is identity, but identity we want to access to the index zero. Like the first array, we wanted to get the second index, so we access to the name and the number of the index. So here we have the object in index zero, then we want to access to hop is the arts or little access to a sports sports but I want to access to swimming.

So to the sports one you can see now nice that we now make it inside paragraph to make it advance it does this and we can use All information. So for example, we say there is an opening paragraph tag, plus, you have something My name is space, then add, so want to access to the second object, so it's identity, but this time is one. So now we want to access to the name. So that name less and more. Age is so now we want to access to the age. So identity one that age Less my favorite sport is for example it will make it volleyball.

So, identity that is that sports zero less my favorite or is and plus identity one that was that arts and bless flows Paragraph dad so we have our own here to see in the console can treat robbery zero undefined to the lion 40 Yeah, here is upper cases. Nice. My name is Alonzo and my age is 30 are my favorite sport is volleyball. My art is writing. Nice. Now I want to say congratulation.

Just learned how to type a Jason object. This is a Jason object is an array of objects. So really the first object which has some keys and values and the second object also has some keys. So this is the syntax for JSON object. But the keys for JSON object will be in within double quotes. So name will be within double quotes, and age and all the keys.

Now, we didn't see any mistakes, because we use Jason, locally, or in our PC, not using server. But when we learn how to access to a JSON file from a server, and the keys aren't in double quotes, you will get an error message. So look to see if there is any difference or not the same thing But here is the right syntax for JSON object. So Jason is ethics. So it's easily to receive and sent to the server. So we can just store data in servers.

And this will make our page very fast. And you will see this later when we explain how to get data from server and send data to the server. But now that we learn another way to access to any element inside the object, this way, we'll make it easy for you when we start learning how to receive and send data to the server. So let me see. So beneath I will define a variable and quote mine. json, and it will be equal to JSON that string phone what did this mean not literally Finish it.

We want to define identity, which is the object or literally consider it as a file. So it's Jason file. So what is Jason stringify? Before I told you that Jason is a text, so make it easy to the browser to send or receive data from the server. So to send data to the server, or send this JSON file to the server, so we have here an object, so we're going to convert it to string to send it to the server. And when we get it back from the server, we will use another function to convert it to text again, so we can display it or use it within our page.

Literally see this. So our server here is virtual. I'll just use a variable as a server. So now using string fight function, I converted This object or this JSON file object to a string. So now that we send it to the server, but look our server, the server will be a variable. So let me send now my Jason to this local server.

So local storage dot set item, and the name of the server or the variable now. So let me call it this JSON, then the JSON file. So now we save that JSON file and set our variable my Jason Bourne, Jason. So all what we do now is convert this object identity to a string and saved inside of audible by Jason, then send my Jason to an another variable, which will be as a server, but local server. Now that we get back this JSON file and display it within our page. So if we define another variable and we'll call it text will equal to, we want to get the JSON file.

So local storage that get it. So what are the items that we want to get test JSON. So now we got the JSON file. So to display it in our page, we got to convert it to a text again. So variable object equal to this time, we will lose function, JSON. The function is Cars, and it will be text.

So we want to convert the object or the JSON file to a text again to display it within our page. So what we have done is convert this object or JSON file to a string, then sent to a local server, which is as a variable, then get this object and convert it to a text. So now we can use it within our page. So just instead of identity one, we will use the variable object which is now equal to the JSON file that we converted to a text. So object one and year two. Let me see if there is In a change so there's something wrong with you check this.

Yeah, there's something wrong with this function. Yeah, there's a and also here he is lowercase letter. There is another own country probably zero of none. So I guess he did something wrong here. Yeah, here is this UI song course a big mistake. We send the data to our codable sister Jason, but he will type the variable wrongly, which we now see.

Nice. So it's the same like before. My name is Alonso. My age is 30 My favorite sport is volleyball and my wife Or is writing the same like before, just I show you this way, because it will be easy for you to understand how we can get data from server and send the data to the server again. But here just we have a local server. But when we have a server, this JSON object won't be in our document.

It will be in the server. And we just we get the information that we want, or the data that you want. Next, I'll show you how to throw the object to the data for doing something or doing an example like this. So I looked through all the data and displayed once we click the button