In this lesson, we are going to be creating mini up that's going to be connecting to a weather forecast
standpoint and there are some limits that we can only do 50 per every 60 minutes.
And this is something to be keep in mind as you're making connections and also doing some troubleshooting
with some of the core issues that we might experience when connecting to end points.
So just using the sample data from the weather API, we're going to loop through the weather API and
pick up some of the sample content that we can output onto the page.
And then using the data from the page, we're going to display some of that content and provide more
options and make additional Thach requests to the endpoints that are coming in from the API itself.
So that's all coming up in this lesson.
So I prepared the HTML file and we've got our basic HTML structure that we've used the same as another
lessons.
And I'm linking to up six charts, cleaned out the J.S. file, selecting only the elements on the page
as objects and then also adding the button text and then adding an event listener.
So the button is clicked.
We get ready in the console.
So that means that we're ready to try out some more APIs and connections to the various APIs.
So going over to sample start open weather map, dawg.
We see we get some content being returned here as a little bit hard to read.
There's a lot of data here and this is giving us some sample API that we can connect to.
So ideally, we want to use this new URL and connect to this and put it on the page so that we can easier
read the content as an object and then get the contents of that object and make use of it within the
Web application.
So let's make our Futch request and create a function.
I just call it get values.
It's going to require a euro parameter and I'll just call this.
You are a one so that we can pass and you are a real one and to get values.
And right now we can use fetch to the euro.
And making the promise, getting the response and then returning the response back as a response and
in Jason structure, then getting the data and as we get the data back, we want to put the data into
the console.
So it looks like we've run into a course error, we're not able to make the request using the local
address, so it's been blocked by the courts policy.
And as we saw in the last lesson, that course comes up fairly often.
And this is something that you can't control because it's at the endpoint and it's some of the restrictions
that are added in from the endpoint.
So let's try it with cource anywhere and add that in.
I just called this.
You are, too.
And this is where the course anywhere can be located and then add in and we'll concatenate to you or
else together.
And see what happens now.
So now we made the request and we were able to access the endpoint.
So on this particular open weather map, Doug, if you do want to do some testing from a local, then
you should be using that course anywhere, which gives you access to the API.
So now we're able to return the content and we've got the products, listings, the samples, the name
is samples and we've got the various products and then documentation on these products.
So docs and then it's got a number of sample arrays.
So if you want to get the forecast for five days, let's see if we can access that data within the products.
And I'm going to just do that within the console.
And as we click it, we're going to build down.
And till we get to the content that we want to loop through that we want to iterate through.
So forecast for five days, take that property name and other products forecast five days as the property
name that we want to access.
And then within the samples, this is where we've got access to the sample you URLs.
So that means that we're ready to loop through that and let's create another function that we can handle
the making of it.
So just give it the name of data and we'll call it.
So log the data object out and then from the function.
Then at that point, then we can start to look to see the content and output it on the page.
So we've made the console data and getting the content and now we can take data samples.
And loop through for each.
And return back to the elements and let's lock logout each one of the elements that are contained within
this object.
And so what it has is it's got just you, Earles, and then these URLs are returning back additional
data.
So we want to make requests to the Urals and output the results.
Into.
Our Web page, so these are just different end points that we can make such requests to.
And let's also take a look at what we've got at Document Dock's.
And, well, output the data dock's.
And that as well is going to be a document you, Earl, that if we open that up.
It provides us some additional details.
That we can get and we can make the requests to.
So this is just documentation on the open weather API and this is another one of those where you are
going to need to have an API key to work fully within the Web application, within the API to make proper
calls.
It gives you some information about the required field, so the query is required, the APD is required.
And here they've got a sample app ID and also a query for it, so an ID and an app I.D. for the forecast.
So those are the required fields.
And Jason, in this case is a default, and that's why we're seeing the content being sent back.
And Jason, so what we want to do is as we iterate through, we want to make another fetch request to
that content.
So function get more.
And this is going to be as well passing in the euro.
And from here, we're going to make a feature request.
So you can come at the structure for the Futch request and in this case, we'll do a console log of
the data.
And as we loop through.
And again, we've run into the course error, so let's solve that by doing the same thing that we did
before, where we're going to be attending the URL to the Eurail to so making a fetch request to you
URL to.
And so that way we can make the Thach request.
And here we've got the city information, so once we get the response information back, we can output.
This content onto the page within the output area.
So let's finalize that where as we loop through, we've got these new objects and from these objects,
we want to output the the page content.
So the name the county and the coordinates of that location.
So function and we just double check and make sure I didn't use our already.
And this would just get data and from here we'll just cancel, logout the data that we've got to work
with.
And instead of logging, adults will log it out to the outer.
And I'll get rid of some of the excess console messages.
So that we only getting the final data that we actually want to output and use on the page.
It looks like one of them isn't structured properly, that's what it looks like, we're throwing an
error there, so we're just going to ignore that.
And if you were creating the application, then.
You would want to be using an actual API key and then making the connection to get the proper data,
and if you do have any types of issues like this, then you'd have to troubleshoot it and find out why
there's such an error.
And this is a decent structure error.
So that's what we've encountered before as well.
So once we're outputting the data.
Let's first put the city and create the city contents with the coordinates.
So constructing and creating a main parent div using the documents creates elements and the element
that we're creating is going to be a div and then using output and append the div to the output and
within the div, the inner html and template literal.
So those are the biotech's.
Let's select the data for the city information and I'll create another object that's going to reference
the data and city.
So it's just easier when I'm coding to access that information.
So for the city.
And use the curly brackets city.
And I'm trying to output the city and other city, we've got a name.
And we can also add in the country code, so that's under a country, it's a city country, we can also
go deeper and get the coordinates.
So that's city and that's an object within, so get the coordinates and within here, there's a latitude
and longitude so that.
And longitude.
So that puts that information onto the page, so it's throwing an error that there's been too many requests
from the Hiroku up and point and doesn't look like I'm able to get any additional information.
So this is essentially what you can do.
And it is a really good practice appx.
And this is one of the disadvantages of actually just using the practice API, where we're not able
to make as many requests as we want.
And Cruz is actually one of the most common questions that I get when making requests to Paris and points.
So if you do want to find out more information about how Kurs works.
It's short for crosswords and resource sharing, there's more information at the Mozilla developer network
and basically it's had a base mechanism that allows you to serve, indicate any other origins from the
domain name.
So it allows us to do a cross origin request and it served from this uses the X X Amelle HTP request
object to request to this end point.
And for security reasons, there are restrictions on from browsers for cross origin requests.
So this is again not sitting on the server depending on what their headers are set to.
And in this case, what we saw is that there are certain limits to making requests from certain endpoints
from certain certain websites.
So there are some limitations to how many requests can be made and there's more information about how
the CRS will work.
And when we are making the request, essentially, we're making the requests from the client going over
to the server, so the Web application is acting the same way as a Web browser where we're going over
to the website and we're getting the content that the server is providing at that particular point.
And this is also a common security feature for the post requests, which we are going to be looking
at in more detail later on.
There's a number of other additional proxies that you can use in order to make the requests or you can
upload it to a website, and that will change where the client site is making the request to the end
point.
And that will also provide you some more options in order to make those requests.
Challenge for this lesson is to connect to the end point.
Also try when you're developing locally to try out with proxy in order to connect to the endpoint.
So it's not coming from a local machine and then output the JSON data onto the webpage.