Nothing is better than an advanced example, join this JSON tutorial. This example will show you how JSON objects are great to get data from server without reloading the page. Just the user insert his email, insert anything and his password and he should get his user name and the selection to select the country that you want to work in. Please insert your email and password correctly so that you inserted correctly So now we get his user name, and he should select the country that you want to work with. And here's the number to call his company. So our code will be checking the validation for the email and the password.

And according to its true or not, we will display the message and miscellaneous. Before we start, I want to show you the JSON file. This is the code and here is a JSON file consists of four objects. Each one has a username, password, email, and company branches. And I've seen this before. So our job today is on server.

So if you don't have a server, so you can follow with me by just copy this JSON file and paste it in your document. Just make it locally, like what we have seen before is to copy the adjacent object, but assign it to a variable and then use this variable. And I will leave a link so you can download it. Or if you want to take it from scratch, it's up to you. So let's get started. So to start from scratch, so create HTML code.

I use bootstrap to make it responsive. So if you want it to look like this, make sure to have like this goal. Firstly to define four variables. For email input password input, the button and finally the division that will hold the message. So variable in the URL to document your ideas in mail. Let's define another one for the password then the request.

So, this we define variable While equal to new Hello, HTTP request. They will let you open this request. Okay. Use get method and then the name of the JSON file, which is card identity dot JSON. Then the to make function once clicked button. So button the collect function then define variable y equal to JSON, parse your then lines that this plants text.

So now we append your request just remained to send it lines then send we'll create a function which will make validation for the email and password and slay the messages and do everything that I will quote within the partner function. So I will call it render HTML. Why they love to start creating render HTML function so function Which you know, which will have an argument data, they'll let me now make sure if the email and the password for the first object, so this object has been inserted correctly. So let's check this. So if you mail the value, if the input value is equal equal data, zero, that email. So now we check if the input value is equal to data zero, which is the first object and equal to email that email.

So if the input value is equal to To this value and so both conditions should be true. The same thing but for password if password not value equals equal data zero that password. So, in this case that we define here a variable equal to the identity card and equal to empty. So in this case we make the Identity Card equal to the identity part Plus to display the user name, but first is to start with paragraph tag plus your user name is plus data. Zero username plus to close the paragraph tag and then plus another paragraph to tell the user to select one choice. So plus another paragraph.

Message plus, close paragraph tag Then let you start creating selection. So plus select tag. Now let me give it a class equal to form control, which is a bootstrap built in class to define it as a form. So if you don't want to discuss the problem, then let you start making for low to splay the data within the country matches object here want to display the country and the telephone with a select element so that we see how we can do this for whatever we do, and I did Dan data zero Company branch branches that learn. So, now we get the live for the cultural branches and then a plus plus incrementally and within this loop which will now display the country then display the phone number. So identity card will equal to identity card which is not equal to this value, there is a name and the message plus to start making the options.

So, option then within the option, the data zero that company crashes That country so now we display the country and beside the country to display also the phone number plus phone number is less data zero that company branches but this time that telephone but here Don't forget to make cut your branches, boy and also here to close the option tag Then now if you update the identity card to close select tag, I want to close this look at what they have to close it outside Oh. So certain identity card will equal to the last Identity Card plus close select tag. So now that condition for the first object is over, we now check that email equal to that email on that first object and the password to so in this case, display the username and make a select element which has the country for this company and its phone number.

So now that we displayed and make sure it is true or not card that you know, cheating, no will equal to made in a keycard. Save and see. So, now, here is the password is 12345 so there's something wrong. So the URL is the next acknowledged request is not defined. Do you see this? Now here is lowercase letter.

So have you saved and chipping in Lose your name, select one of these branches and contact them all the number. Nice number is undefined to check this so the wrong course will be with this moddable cell phone your cell phone so it should be the same here to see again. So now it's defined. Nice. So like what you have done For the first object, we will repeated for the other objects. So the same thing.

But this time was else if. So here, we'll copy this one. Now this is what it should be else just ditching that data from zero to one and to model them so it's the same thing. We just change the data from zero to one. Now let me repeat this for the others. So let me check now to check for the last object which has an email.

See them@yahoo.com and the password is 5642 your username is C then select one of these branches. Nice to make sure those are the countries are not local and Nigeria nice. So now have them the conditions for the objects. Now just make the conditions for the validation like if there is an insert the email or the password wrongly what will happen and if there was at the insert the email for the password let to continue. So to see if those are the insert the email and the password elsif this time will be empty. So in this case, the identity card will equal to a message like please Sir, your email and password and elsif this time let me make those are the insert the email.

So please insert your email and if there was our insert password is your password and if there was our CRC that password as a male wrongfully So one other message so just else The identity card equal tool Please insert your password and email correctly. This will save and see now to check if those are the insert the email and the password Please insert your email and password we just inserted for email and insert the password Please insert your password What if I inserted the password Please insert your password and email correctly. Sorry more than email. Please insert your email and if we insert the email and the password correctly so for example, if we take this email And it's password is 4455 username is kin and select one of those branches. Nice. I hope now you'll notice how we can get the data without the page gets reloaded.

Okay, let's try again. So the email, password just look on this reload sign and see if it will work or not. Submit now. So the page to reload the to submit again, again is forever. But of course we don't want this to happen. Actually it's problem in our code.

So let's go check this out. So, the wrong here that there is a loop that continue once we click the button, so their own is good. We don't need to assign to empty and also here with a need to make and prevent. And here we don't need to make an improvement. We do need to the previous value for the identical. Here we have a condition for the object three.

So why were you the data for object two and one? So I think it's a big mistake that you save now. Try again There is something wrong. Yeah Here we forgot to remove the Identity Card variable. So, when we click the button again, it won't make a load and plate each time we click the button just one time. And if we make a mistake here like remote email, Please insert your email and return it back to Everything now is going very well.

And also without reloading the page. Finally, and before we end this video, I want to show you something, I have here the code on my document. So this will try to open it from our browser, local browser. So here is the file that we just submit now. So nothing happened, but you see the console. And the mistake here is access to a simple HTTP request at give you the URL for your page from origin now has been plugged by policy.

So we can't access to the server. Because now the page which is our document here, not on the server with a JSON file, that other server we can access easily. So I hope now I delivered This information very well, the JSON file, and your page should be on the same server. Maybe I repeated a lot. I know that. But actually, it's important, and one of the mistakes that you can find.

So the most important thing now is to practicing, we're going to have a sample or domain name. If you don't just start with a JSON file, and assign it to a volume, then use this volume, like what we have done before. At practice objects, you can use Celtics to decide to make a JSON file and you can access to the data using yours. So now everything is in your hand. So practicing will make you more powerful. You can use JSON objects easily and without any effort.

So practice well. Good luck and see you next time.