In today's video, I'm gonna show you how you can query any graphic.

You'll a p I that you want by using just the tools built into Java script.

We're not gonna be using any libraries at all, and it's incredibly easy to do so without any further ado.

Let's get started now.

Welcome back to Webb.

Have simplified my name's Kyle, and my job is to simplify the Web for you so you can start creating your dream project sooner.

So that sounds interesting to you.

Make sure you subscribe to the channel for more videos just like this one.

And now to get started on this video, you can see that as always, we have visual studio code open toe, a blank project on the left and on the right.

I actually have the graphic.

You'll playground for the A P R that we're gonna be using.

It's at countries dot Trevor blades dot com.

I'll leave a link in the description blow for you, but essentially what this craft kill a P I does is if we open up the docks, you can see that we access the continents and we can access countries as well as languages.

And what our application is going to do is it's going to query the continent's list, and it's going to give us a select box with every single one of the continent's from this list.

And then whenever a user selects a continent in that select box, it's going to get all of the countries for that specific continent.

And just to give you a little bit of an example of how this works, we could just do a query here.

And we want to query the continents so we could say continents.

And we want to get back the name as well as the code.

And if we just hit play, you can see we get back all of the different continents as well.

Is there specific, unique code?

And if you're not very familiar with graphic you'll or how graphic you'll works on the back end, I have an entire video covering graphical in depth in no jazz, which I'm gonna link in the cards and the description down below for you to check out.

Now that we understand how this AP I works, let's come over to visual studio code, create our basic index dot html.

And if we just hit exclamation point and enter, it's going to generate all of the boilerplate html code that we need for our application now inside of here.

What we can do is we want to create our select box, which is going to be our continent select.

So we could just say continent select.

And then inside here is where we're gonna put all of her options by default.

We're gonna want to have a placeholder option which is just going to be selected by default.

Make sure just option.

We want that to be selected and we want it to be hidden just so that the user can't actually select this inside of the select box.

It'll only show as the default value and we want this just say, select a continent.

And then lastly, right below all this, all we want to do is add in a div and is DIV is just going to be for our country's list so we can give it an I d, which is just going to say country's list, and we can close that off and we could just leave it completely empty.

We're gonna put the country's in there now, if we save this and if we right click, we can click open with live server.

If you have that extension installed in visual studio code and you can see it says selected continent And of course, there's nothing in the list.

If we remove this hidden property, you can see that it will be in the list.

But if we add that, that means that the user cannot select that.

So our list right now is empty, which is okay, because we need javascript to populate this by calling the FBI right here.

So it's include a script which we just wanna have here with a source of script J s.

This is gonna be the Java script file we make, and we're just gonna defer this so it loads after HTML section loads, and we can create that script out J s manor.

Now, before we jump into populating that select box that we have over here, we just want to test actually query the Graff, kill a p I, and in order to do that, we're going to be using fetch, which is built into the browser, and it allows us to make a P I request and calls, and we just want to pass it this euro countries dot Trevor blades dot com There's going to be the Earl portion of our fetch, so it's just put that in there like this.

And then the next thing we need to pass our fetch is going to be a bunch of options, which is going to be how we're going to customize it.

So first we want to save him method, which is going to be post This is gonna be a post request because we're trying to post to this graph cool a p I.

Next we need to put our headers because we're going to be getting chase on back.

As you can see, this is Jason over here.

So we need to make sure that we set our headers for our content type hopes.

So got content.

If I can spell it properly.

Content type, just like that, we want to set this to application.

Sliced Jason.

There we go.

And that's essentially telling us that what we're getting back from the a p I is going to be Jason information and then lastly, here, we need to put the body of our application, and this is going to be Jason, but we need to make sure we convert it to a string to be used with fetch.

So I'll say Jason got string.

If I and inside here we're gonna pass an object and the object is only gonna have one property, which is query.

And this is going to be this query right here.

And we can't actually pass this as an object, because isn't Allah JavaScript?

It's not an actual object, but we can do is pass it as a string.

So if we use back tick, we can put our string onto multiple lines and we could just put our query inside of here just like this.

And we can always just copy this query straight here from our graphic you'll and paste it into our fetch.

And this is going to work.

This is going to query the FBI and give us back these Jason results.

So to test that we could just put dot vent in here and this is going to give us back our response.

But this response needs to first be converted from Jason to an actual JavaScript object.

So we just say dot Jason, and then we can do another dot Then let's put these on the same line and this 0.0.0.1 then is going to have our actual date of response so we can just say data and then inside of here we have our data property here so we can say council dot log data dot data and that should be all of these continents here.

What saved that?

Make sure you save our html page and let's actually inspector Page and see if that worked.

There we go.

And if we go over at our counsel, you can see we have an object which has our continents inside of it and the list of all of our continents.

So we know that this worked.

And if we remove code, for example, and we save this and we check our confidence array, you'll see that they no longer have the code.

So we know we're directly calling this a p I and whatever way past that, we're getting back his results.

And if you wanted to go a step further, we could say here continents, its continents.

And there we go.

We have just the list of our continents being returned.

So now what we need to do is actually add these as options to our select.

So it's first get our select.

We can do that by just coming up here, creating a variable which will call continent continent select.

We're gonna set that equal to document dot get element by i d.

And if you remember, we put an I d of continents select on here.

So we're just gonna get that element by that i d.

And now this is our actual continent selector, which we can see right here on the side Now inside of this dot Then, instead of actually logging out our continents, let's loop through each one of them so we can say continents dot for each and we want to do this for each continent.

There we go.

And for each continent we first want to create an option.

So we could just say const option is going to be equal to document dot create element.

We're just created an option element, and then we need to set the properties on this.

We first need to set the value, which in our case is going to be equal to the code of the continent so we could just stay here continent dot code This is the value.

So when we select that option, that'll be essentially they i d of our option.

And the next thing we want to do is we want to set the inner text.

So we can said that here toward continent dot name.

Now we need to add this option to our select so we can get our continent select.

And we just want to make sure we have penned this to our option here.

So we put our option inside of our confidence select.

And now if we save that close out of this, you can see that all of our different options for our continent are inside of our select.

We can select one.

You change into a different one.

It really doesn't matter.

But now the next thing to do is to actually get the country's for whichever continent we select.

Because right now this select does nothing.

And if we go back to our a p, I hear what may just expand this out.

There's another query weaken do inside the docks, we can query for an individual continent and this just takes the code.

So we want to do is we want to create for a continent when we pass it in a code.

As you can see, we have a F for Africa.

So let's just put in a f and we want to get back the country's so we can say here that we want to get back countries and for each country we just want to get their name, for example.

So now let's run that and you can see we get every single country inside of Africa and this will be the query that we want to run when we actually do our code inside of our application for when we select one of these continents.

But something that you can do in gradual is actually pass in variables other than hard coating it.

Because right now this F is hard coded into our query.

We could do what's called passing a variable so we can create a function called the Gate Countries, and we can say that it takes a variable called code.

We can call this whatever we want.

It doesn't matter and we can say that is going to be a string So now we know that we have a variable code which we can use right here inside of our query.

And then down here we can pass query variables.

This is just going to be a job script object, so we can say we're gonna pass it a code, and this code is a f.

Now, if we run this, you can see we get the exact same results over here.

And what this is doing is it's creating this function for us.

It's saying it's gonna take a code variable which we created down here, and it's going to pass it into the continent.

So we're actually going to create this exact query inside of our Java script in order to run it.

But before we do that, I want to clean our coat up over here just a little bit because we know we're gonna be calling this fetch query multiple times, and the only thing that's gonna be different is our query section.

So we don't wanna have to copy and paste all this code.

That's what's just creative function to do it.

We're just gonna call it Cleary fetch, and it's going to take in a query of whatever we're going to be passing.

That query is going to be this section right here.

So it's copy this code into the function for now, let's make sure that we return our results so we can actually use these inside of our function.

And we want to do is this query we're going to pass in here as our quarry property for R J sand out string.

If I We also know that it's always gonna be Jason, so we can copy this dot then which converts our object to Jason.

And now if we remove all of this code, we can just call that function we just created, which is query, fetch, and all we want to do is pass it this query right here that we just created.

Close it off, and then we can put our dot bend back up here, and if we save and check over here, you can see our list is still loading.

This will allow us to call this same function for our second query, which is this query to get all over different countries and we won't have to copy all this code every single time.

So now that we have that helper function created for us.

We can actually set up this selector for our change event so we can say continent to select dot ad event listener.

But we want to listen for a change.

Essentially, this will be called every single time that we change our selector inside of here.

Whenever we select a continent, this function is going to be called and it's going to take an event argument for what is actually being called, and we can get the value that is selected by just calling here e dot target dot value.

This is going to be the value of whatever we select inside of here.

So it's said that equal to lips are constant is going to be called country from Sorry continent code.

What is gonna set that equal to this value?

This is essentially the code that we said here on our option dot value.

So if we select Africa as we know, this is going to be a f as the code inside this value now, with that out of the way, what's create another variable which is going to be far countries and we're actually going to create a new function to get these countries.

And this function here is just gonna be called the gets continent countries.

And it's going to take in our country, our continent code just like that.

And this is where we're gonna call our query to get our fetch So we can just come in here, say, query, fetch and we know that we need to pass it in the query that we used over here.

So let's expand this out so we can see this.

Copy this entire query inside of our fetch here and make sure it's indented properly.

And as you can see, we're now getting all of our countries.

But we need to pass it.

There's a variable of code, and the way that this works is we can just passing another property to our body, which is called variables.

We could just create a variable here to hold those, and we can actually pass it in toward query fetch just like this.