‫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.