Instructor: So now that we know about AJAX and API's,
let's actually make our first API call.
So in this lecture, we're gonna build
a nice UI component, such as this one here,
which contains data about a certain country.
And this data about the countries
is actually gonna come from a third party online API.
So just as we learned it in the last video.
So here, we have this first card for Portugal,
and then another card for the USA.
And of course, this would work
for any country in the world.
And this is actually really exciting stuff to me.
So I think it feels really magical,
and next level, to be able to do this.
So to kind of magically get this kind of data
from the internet, and then work with it
in any application that we're building.
And so let's now start working on this.
And as always, I already have my starter files
up here in VS Code.
And I also already started the live server,
and so that's what I have here open.
And so now let's get to work.
Now in JavaScript, there are actually multiple ways
of doing AJAX calls.
But we're gonna start with the most old school one.
And that's called the XML HTTP request function.
So we can do new XML HTTP request.
So just this one here.
So we call this function
and then all we need to do for now
is to store the result in a new variable.
So let's call this one request.
And so that's the first step
of using the XML HTTP request way
of doing AJAX calls.
Now again, as I mentioned,
this is the old school way of doing AJAX in JavaScript.
But I'm still showing it to you for two reasons.
So first, I want you to know that XML HTTP requests exists,
because you might actually need it in the future.
And second, I want to show you how AJAX calls
used to be handled with events
and callback functions.
And so only after that
we should move on to a more modern way
of handling asynchronous JavaScript,
which is gonna be a feature called Promises.
But anyway, next, we need the URL
to which we will make the AJAX call.
So we can now say, request,
so that object that we created here, .open.
And in here, first,
we need to pass in the type of request.
And remember that the type of HTTP request
to get data is simply called GET.
And second, we need a string containing the URL
to which the AJAX call should actually be made.
So let me now show you the API that I selected
for this project and also how we can use it
so that you can actually understand
how you could do something similar yourself.
So on GitHub, there is this huge repository,
as you can see here, which is called Public APIs.
And so if you just Google for that,
I'm sure that you will find it.
And here is a list of a ton of public
and free API's that you can use.
So we have all these different categories here.
And so there's really an API for everything.
So just as I said, in the last video,
and the one that we are going to use
is called rest countries.
So it's this one here, all right.
So we see here that, well this is a big table,
so we see that the API we are going to use
needs no authentication.
I think it uses HTTPS and I'm not sure about course.
And this one here is important.
So any API that you use here
should always have CORS set to Yes,
or maybe to Unknown, am I right?
And CORS stands for Cross Origin Resource Sharing.
And without CORS, we cannot access a third party API
from our own code, and so going back here,
well, now it's gone, here it is.
So you see, it doesn't need authentication,
and it uses HTTPS.
So this is a good one and so let's click it,
which will take us basically to the documentation page.
And now here, I'm simply looking
for a so called API endpoint.
And so the endpoint is essentially just another name
for the URL that we need.
So here we have the first URL,
and this one is basically for all countries.
So if we wanted to get a list of all the countries
from this API, we could make an AJAX call to this URL here.
Okay, but that's not what we want.
Instead, I want to search the API by country name.
And so therefore, this here is the URL
that I'm going to use.
So let's copy it and I hope that you followed
these steps here.
And if not, you can of course, simply paste it here.
Am I right?
And I will start with Portugal,
but you can, of course, use your own country.
So with this, we basically open the request.
And now next, we need to also send it.
So you see, there are a lot of steps involved
when using this way of doing an AJAX call.
Okay, so this will now send off the request
to this URL here.
Now, in order to get the result,
we couldn't simply do maybe something like this.
So set some variable simply to this result here.
And the reason why we cannot do this
is because the result is simply not there yet, right.
So this AJAX call that we just send off here,
is being done in the background,
while the rest of the code keeps running.
And so this is the asynchronous,
non-blocking behavior that we talked about
in the last lecture.
So let's get rid of this.
And instead, what we need to do
is to register a callback
on the request object for the load event.
So request, and then again,
our old friend, addEventListener.
And here on the request,
we will wait for the load event.
So again, here, we basically send off the request.
And so that request
then fetches the data in the background.
And then once that is done,
it will emit the load event.
And so using this event listener,
we are waiting for that event.
And so as soon as the data arrives,
this callback function here will be called.
Now, let's then actually log the result to the console.
So the this keyword inside of this function
is the request, right?
So we could also do request,
but let's just use the this keyword.
And then the response is in the property response text.
And again, this property here is of course,
only gonna be set
once the data has actually arrived, right.
So if we tried to set it out here,
then that wouldn't work, of course.
We can still try that just to see request.responsetext.
And so that would be exactly the same as this one.
And well, already, we have our first data here.
So that's great, and as you see,
this is the result of our very first AJAX call.
So great job, this already worked.
And you see that this kind of looks
like a bunch of data about Portugal indeed.
Now, we just need to convert this here
to an actual JavaScript object.
Because what we have here right now is JSON.
So remember that JSON is basically
just a big string of text.
And so what we need to do here is to then convert that.
We already did that before, actually.
So that's JSON.parsethis.responsetext.
So let's take a look at the data.
And by the way, as you see here,
of course, the result of request.responsetext
out here is nothing, right?
So let's get rid of it.
And so indeed, here we have this object
with all this data about Portugal.
So we have the capital, which is Lisbon,
we have the flag even.
So basically a link to the image of the flag.
And indeed, this is where we're gonna get
this flag here from
and then all kinds of other stuff,
like the location, the population, region,
and so on, and so forth.
Now, you'll see that this is actually
an array containing one object.
And so let's quickly de-structure that like this.
So remember, that would be the same thing as doing this.
Right, but of course, de-structuring
is a lot more beautiful.
And so now we get immediately the object here.
Great, and now we can actually build that card component.
And so let's copy the HTML here from this comment.
So open the index.HTML file,
get the HTML from there.
And then we can create a template literal,
that we then have to fill up.
Here, I'm of course, missing the name.
And as always, I'm calling it HTML.
And so now all we have to do is to replace this data.
So let's open it to see what we actually have.
So here, we are actually starting with the image.
So we need a source and of course,
that source can be any URL,
and doesn't have to be a local image
that we have on our computer.
And so the one we will use is this one here.
And so that is at data.flag.
Next up, this is where the actual name of the country goes.
So data. yeah, so down here is the name.
Then here, I also enter region.
So that would be Europe in this case.
And so this is the one.
So that's data.region.
And then finally, we also want some information
about the population, language, and currency.
And all of that is present here in this data,
so that's at data.population.
And so this here is basically 10 million.
So we don't want to display this entire number.
So let's just round it to 10.3 or 10.4 million.
So the way we can do that
is to convert this first two number.
So as always, I'm just using plus for that.
Then divide it by a million.
So yeah, that's a million.
And then let's round this value finally.
So this is a number and so on a number
we can call toFixed with one decimal place.
Next up language, so I'm doing this pretty fast
because here we are basically
just practicing what we already know, right?
So again, this one is for languages.
And so let's see, so languages is basically an array.
No, I clicked, and so now it's gone.
So let me just put something else here for now.
Because this was causing the error.
So let's see the languages
we have multiple here, as you see.
And so what we want is simply
the first element of the languages, and then the name.
Now it's the same as actually gonna happen
with the currencies.
So we also have an array of the currencies.
And then we want the name of the first one.
So again, we want to data.languages,
the first element, and from there,
we want to take the name, and the same with the currencies.
Currencies, right, and that should be it.
And now all we have to do
is to then actually insert this HTML into our page.
So I actually already have it here selected.
But just to make it complete, let me show it to you.
So we have this countries element here.
And so that's what I call the countries container.
And so here we want country.insertAdjacentHTML,
beforeend, and then the HTML that we just created.
Now finally, we also need to set the style
of this container to opacity one.
So let me show you that one also in the code.
So I set the opacity of the country's container
here to zero.
And so now we set it to one so that we can then see
a nice animation, which is gonna be triggered
by this transition okay.
First, let's give us some space
so we can then actually see it.
And so, as I just said,
we need to say countriesContainer.style.opacity
and set it to one.
And now as I save it, the data should appear and it does.
So that's amazing, right?
And it looks just like here in our demo.
So that's fantastic,
I really love it when it works just like this.
So getting data from some third party API
really feels like magic to me.
Now, let's actually reuse the same code here
to create an element like this for multiple countries.
And so what I'm gonna do
is to put all of this into a function.
Let's call it getCountryData.
And so this one will take a string
as an input of a country, okay.
So the curly brace down here.
And then here, instead of hard coding Portugal,
we will use that country that we get as an input.
All right, country, and to now down here,
we can then call this function,
getCountryData, Portugal.
So let's see, and yep, that worked just the same.
And now let's try another one.
So let's try the United States of America,
just like I had it in my demo, and here we go.
So now we have data about two countries.
And by calling these functions here twice,
we will basically have two AJAX calls
happening at the same time.
So in parallel, so to say.
And if we reload this page here a couple of times,
then they might appear in a different order.
And the reason for that is basically
that the data arrives at a slightly different time,
each time that we're loading the page.
And so in fact, this really shows
the non-blocking behavior in action.
So as we call getCountryData here with Portugal,
for the very first time, it sends of this request,
and then JavaScript moves on in the code right away.
And so it goes right here to this next line.
And this, of course, fires off another AJAX call
immediately, way before the data of Portugal
has actually arrived.
So again, we will have two AJAX call
happening at the same time.
And so whatever one arrives first,
will then fire the load event first.
And so if the first one is to AJAX call for the USA,
well, then the first element
that's gonna be printed here will of course,
be the one from the USA.
And only after that the data for Portugal arrives.
And then this callback function here
is called with the data of Portugal.
And of course, the same would be true
no matter how other requests, we would fire off here.
Let's say Germany here.
And so now, we actually got the data in the same order.
But so now it's actually completely different.
And so this confirms what I just explained before.
Now, if we actually wanted these requests to be made
in a specific, like predefined order,
then we would basically have to chain the requests.
Which means to make the second request
only after the first request has finished.
And that's actually what we're gonna do in the next lecture
so that I can show you something
that we developers called callback hell.