Building a Weather App
Using fetch functions with public APIs
In this article I will be going over how I used data from two public APIs to create a simple weather application. The app can be viewed here if you want to take a look and the code here.
When planning this app, I started searching for public APIs that dealt with weather. One that seemed to work well was called 7Timer! and it had very clear documentation on how to make a request and how to interpret the results it gave back. However I quickly ran into my first major obstacle- when making the request, you needed to provide the location as latitude and longitude coordinates. Other weather APIs I found also seemed to have the same requirement. This was an issue because most humans do not know the latitude and longitude coordinates of locations offhand.
After thinking about different possible solutions on how to get around this, I discovered a second API called Geocode.xyz which could take a request including latitude and longitude coordinates and respond with a location…or take a location and give back latitude and longitude coordinates! This was exactly what I needed. Armed with both of these APIs and having tested that each one worked as I expected to independently, it was time to combine them together so that a user could enter a location in the text field and receive the weather as a result. Let’s take a look at how this should work.
So now that we know how the program should function, how do we implement this in code? I did this by nesting one fetch method inside another. Let’s take a look at the following code.
To start things off, we set a variable called userInput to equal the string “Miami, FL”. This is the location we want the weather for. On line 6 we start our first fetch method and include a URL to the Geocode.xyz API that includes the userInput variable inside the URL. This makes our first request. The first .then() method starting on line 7 receives a response in JSON format and turns it into a JavaScript object which we can then work with in the second .then() method starting on line 10. This object has been called locationData and will include the latitude and longitude coordinates for Miami.
Now that we have our coordinates, we start our second fetch function on line 14 and include a URL to the 7Timer! API. This URL must include coordinates for the location we want to get weather information for and notice we are able to include these by using properties of the locationData object we got from the first fetch method. Next we use two more .then() methods just like we did on the first request. One of them converts the JSON response to a JavaScript object we can work with, and the second lets us do something with that object that we have now called weatherData. This object has several nested objects/arrays as properties but on line 19 you can see that all we are doing with this object is drilling down and logging the temperature result to the console. If you run this code and check out the console you will see the following output.
If you copy this code you can run the program yourself and see the results. Try changing the userInput value on line 1 to “Houston, TX” or “Baltimore, MD” instead and see what you get.
APIs are powerful tools that allow you to include all kinds of data and features in your applications. There are tons of public APIs that anyone can use covering almost any topic you can think of. I used two different ones to make a weather app but if you want data on the stock market, current events and news, or even just random Harry Potter facts, there’s an API for you out there. After picking one that interests you, it is just a matter of looking at the documentation to understand how to make a request and understand the response it sends back, and combining it with the fetch method to start building some seriously fun and interesting projects.
