How to get weather forecast in your application for free
Are you working on a cool side project and are looking for a free weather API that you can consume without the need of signing up and paying for expensive API keys? Or are you and your company looking for your next cool feature but don't have the budget for paying for a service? Regardless of your situation, we will show how to get weather forecast for free.
An Algobook API
If you have read our articles before, you might have stumble on some of my previous promotion articles. You see, a big passion of ours, is to build software of all kinds and provide it for free to everyone who want to have it in their projects. And when we have something we want to really highlight, we try our best to find ways to reach out to people - so in this guide, we will show how to use our Weather API.
Consume the API
So let's dive right in to the good stuff. The API consists of three endpoints that we can use:
-
forecast for a city
-
forecast for a city name and city id
-
city suggestions
And in this guide, we will go through them all.
GET /forecast
We will start with getting the forecast for a city. The API are using a service for getting the most accurate city by the name provided, which means if you want the forecast for a smaller village with the same name as a big city (those exists), you might need to get the city id from the suggest API first, but we will cover that soon.
const response = await fetch( "https://weather.algobook.info/forecast?city=Paris" ); const data = await response.json(); console.log(data);
The above code will get the forecast for Paris the next 10 days. JSON response look like this
{ "city": { "id": 2988507, "name": "Paris", "population": 2138551, "lat": 48.85341, "lon": 2.3488, "country": "Frankrike" }, "forecast": [ { "day": "2023-05-08T00:00:00.000Z", "formattedDay": "Today", "minTempCelsius": 13, "minTempFarenheit": 55, "maxTempCelsius": 15, "maxTempFarenheit": 59, "windAverageMs": 2, "windAverageKmh": 7.2, "windAverageMph": 4, "windDirection": 224, "symbol": "6", "forecastText": "Overcast" }, { "day": "2023-05-09T00:00:00.000Z", "formattedDay": "Tomorrow", "minTempCelsius": 10, "minTempFarenheit": 50, "maxTempCelsius": 15, "maxTempFarenheit": 59, "windAverageMs": 4, "windAverageKmh": 14.4, "windAverageMph": 9, "windDirection": 238, "symbol": "19", "forecastText": "Moderate rain" }, { "day": "2023-05-10T00:00:00.000Z", "formattedDay": "Wed", "minTempCelsius": 10, "minTempFarenheit": 50, "maxTempCelsius": 15, "maxTempFarenheit": 59, "windAverageMs": 5, "windAverageKmh": 18, "windAverageMph": 11, "windDirection": 264, "symbol": "6", "forecastText": "Overcast" }, { "day": "2023-05-11T00:00:00.000Z", "formattedDay": "Thu", "minTempCelsius": 9, "minTempFarenheit": 48, "maxTempCelsius": 16, "maxTempFarenheit": 61, "windAverageMs": 2, "windAverageKmh": 7.2, "windAverageMph": 4, "windDirection": 260, "symbol": "8", "forecastText": "Light rain showers" }, { "day": "2023-05-12T00:00:00.000Z", "formattedDay": "Fri", "minTempCelsius": 8, "minTempFarenheit": 46, "maxTempCelsius": 17, "maxTempFarenheit": 63, "windAverageMs": 4, "windAverageKmh": 14.4, "windAverageMph": 9, "windDirection": 176, "symbol": "19", "forecastText": "Moderate rain" }, { "day": "2023-05-13T00:00:00.000Z", "formattedDay": "Sat", "minTempCelsius": 11, "minTempFarenheit": 52, "maxTempCelsius": 16, "maxTempFarenheit": 61, "windAverageMs": 5, "windAverageKmh": 18, "windAverageMph": 11, "windDirection": 8, "symbol": "8", "forecastText": "Light rain showers" }, { "day": "2023-05-14T00:00:00.000Z", "formattedDay": "Sun", "minTempCelsius": 9, "minTempFarenheit": 48, "maxTempCelsius": 18, "maxTempFarenheit": 64, "windAverageMs": 5, "windAverageKmh": 18, "windAverageMph": 11, "windDirection": 338, "symbol": "19", "forecastText": "Moderate rain" }, { "day": "2023-05-15T00:00:00.000Z", "formattedDay": "Mon", "minTempCelsius": 10, "minTempFarenheit": 50, "maxTempCelsius": 13, "maxTempFarenheit": 55, "windAverageMs": 4, "windAverageKmh": 14.4, "windAverageMph": 9, "windDirection": 314, "symbol": "9", "forecastText": "Moderate rain showers" }, { "day": "2023-05-16T00:00:00.000Z", "formattedDay": "Tue", "minTempCelsius": 9, "minTempFarenheit": 48, "maxTempCelsius": 13, "maxTempFarenheit": 55, "windAverageMs": 6, "windAverageKmh": 21.6, "windAverageMph": 13, "windDirection": 346, "symbol": "18", "forecastText": "Light rain" }, { "day": "2023-05-17T00:00:00.000Z", "formattedDay": "Wed", "minTempCelsius": 7, "minTempFarenheit": 45, "maxTempCelsius": 15, "maxTempFarenheit": 59, "windAverageMs": 4, "windAverageKmh": 14.4, "windAverageMph": 9, "windDirection": 176, "symbol": "1", "forecastText": "Clear sky" } ] }
As seen, the API will give us necessary data that we can use in a widget for example. There are also support for both metric and imperial system.
GET /city/suggestions
Next up is our suggestion endpoint. So if we want to search cities by a search string, or if we have a small village with the same name as a big city, we can get the city id the city we are interested in and then use to get the forecast.
const response = await fetch( "https://weather.algobook.info/city/suggestions?query=Jersey" ); const cities = await response.json(); console.log(cities);
Now we will get all the cities that relates to the search string "Jersey"
[ { "id": 5099836, "name": "Jersey City", "population": 247597, "lat": 40.72816, "lon": -74.07764, "country": "USA" }, { "id": 4700967, "name": "Jersey Village", "population": 7620, "lat": 29.88772, "lon": -95.563, "country": "USA" }, { "id": 3042091, "name": "Saint Helier", "population": 28000, "lat": 49.18804, "lon": -2.10491, "country": "Jersey" }, { "id": 4241822, "name": "Jerseyville", "population": 8465, "lat": 39.12005, "lon": -90.32845, "country": "USA" }, { "id": 10942508, "name": "Le Hocq", "population": 0, "lat": 49.16823, "lon": -2.06178, "country": "Jersey" } ]
We've added some extra data that might be useful, such as coordinates, population and country name.
GET /forecast/:city/:id
So, now we will show the "small village" problem. If you imagine a small town also called New York, our API will always go with the Big Apple since it is most likely the one you want the forecast from. But if you want it for the small village, you can use our exact city endpoint for this.
const response = await fetch( "https://weather.algobook.info/forecast/New York/5115985" ); const data = await response.json(); console.log(data);
And the response will be
{ "city": { "id": 5115985, "name": "East New York", "population": 173198, "lat": 40.66677, "lon": -73.88236, "country": "USA" }, "forecast": [ { "day": "2023-05-07T22:00:00.000Z", "formattedDay": "Today", "minTempCelsius": 21, "minTempFarenheit": 70, "maxTempCelsius": 24, "maxTempFarenheit": 75, "windAverageMs": 5, "windAverageKmh": 18, "windAverageMph": 11, "windDirection": 317, "symbol": "1", "forecastText": "Clear sky" }, { "day": "2023-05-08T22:00:00.000Z", "formattedDay": "Tomorrow", "minTempCelsius": 10, "minTempFarenheit": 50, "maxTempCelsius": 10, "maxTempFarenheit": 50, "windAverageMs": 3, "windAverageKmh": 10.8, "windAverageMph": 7, "windDirection": 209, "symbol": "19", "forecastText": "Moderate rain" }, { "day": "2023-05-09T22:00:00.000Z", "formattedDay": "Wed", "minTempCelsius": 11, "minTempFarenheit": 52, "maxTempCelsius": 10, "maxTempFarenheit": 50, "windAverageMs": 2, "windAverageKmh": 7.2, "windAverageMph": 4, "windDirection": 285, "symbol": "1", "forecastText": "Clear sky" }, { "day": "2023-05-10T22:00:00.000Z", "formattedDay": "Thu", "minTempCelsius": 14, "minTempFarenheit": 57, "maxTempCelsius": 10, "maxTempFarenheit": 50, "windAverageMs": 3, "windAverageKmh": 10.8, "windAverageMph": 7, "windDirection": 259, "symbol": "1", "forecastText": "Clear sky" }, { "day": "2023-05-11T22:00:00.000Z", "formattedDay": "Fri", "minTempCelsius": 13, "minTempFarenheit": 55, "maxTempCelsius": 26, "maxTempFarenheit": 79, "windAverageMs": 2, "windAverageKmh": 7.2, "windAverageMph": 4, "windDirection": 265, "symbol": "1", "forecastText": "Clear sky" }, { "day": "2023-05-12T22:00:00.000Z", "formattedDay": "Sat", "minTempCelsius": 16, "minTempFarenheit": 61, "maxTempCelsius": 28, "maxTempFarenheit": 82, "windAverageMs": 3, "windAverageKmh": 10.8, "windAverageMph": 7, "windDirection": 287, "symbol": "8", "forecastText": "Light rain showers" }, { "day": "2023-05-13T22:00:00.000Z", "formattedDay": "Sun", "minTempCelsius": 15, "minTempFarenheit": 59, "maxTempCelsius": 19, "maxTempFarenheit": 66, "windAverageMs": 4, "windAverageKmh": 14.4, "windAverageMph": 9, "windDirection": 65, "symbol": "6", "forecastText": "Overcast" }, { "day": "2023-05-14T22:00:00.000Z", "formattedDay": "Mon", "minTempCelsius": 13, "minTempFarenheit": 55, "maxTempCelsius": 17, "maxTempFarenheit": 63, "windAverageMs": 3, "windAverageKmh": 10.8, "windAverageMph": 7, "windDirection": 56, "symbol": "2", "forecastText": "Nearly clear sky" }, { "day": "2023-05-15T22:00:00.000Z", "formattedDay": "Tue", "minTempCelsius": 13, "minTempFarenheit": 55, "maxTempCelsius": 14, "maxTempFarenheit": 57, "windAverageMs": 2, "windAverageKmh": 7.2, "windAverageMph": 4, "windDirection": 307, "symbol": "19", "forecastText": "Moderate rain" }, { "day": "2023-05-16T22:00:00.000Z", "formattedDay": "Wed", "minTempCelsius": 16, "minTempFarenheit": 61, "maxTempCelsius": 16, "maxTempFarenheit": 61, "windAverageMs": 3, "windAverageKmh": 10.8, "windAverageMph": 7, "windDirection": 224, "symbol": "1", "forecastText": "Clear sky" }, { "day": "2023-05-17T22:00:00.000Z", "formattedDay": "Thu", "minTempCelsius": 21, "minTempFarenheit": 70, "maxTempCelsius": 21, "maxTempFarenheit": 70, "windAverageMs": 4, "windAverageKmh": 14.4, "windAverageMph": 9, "windDirection": 261, "symbol": "8", "forecastText": "Light rain showers" } ] }
And now we got the forecast for East New York" instead of "regular" New York.
Outro
That's it for this article. I hope you found this interesting and helpful in your project. I have seen a lot of requests on different forums for a free weather API, so I really hope this can give other developers some value. And if you have any feedback or if you think something is missing, please reach out. Contact info is found here.
Thanks for reading and have a great day!
Tue May 09 2023
Quicksort algorithm in JavaScriptA tutorial on how to implement the known algorithm, quicksort, in JavaScript using recursive programming.
Merge sort algorithm in JavaScriptA tutorial on how to implement the known algorithm, merge sort, in JavaScript using recursive programming.
How to get historical sport events in JavaScriptA tutorial on how we can retrieve winners of historical sport events in JavaScript for free. We will utilize our own free Sport winner API in this article.
Caesar algorithm - Encrypt and decryptIn this guide we will use the Caesar cipher to encrypt and decrypt messages in JavaScript.
Find prime numbers in JavaScriptA short demonstration on how we create an algorithm for finding prime numbers in JavaScript
A free API for hashing passwordsA short tutorial on how we can use a free API to hash and compare passwords for our applications user management
Free city API tutorialA tutorial on how to retrieve information about a city on a free API
How to make NPM not publish src/ and other private files to your libIn this short post, we will show how to make NPM ignore project files you not want to get uploaded to npmjs.com for your library.
API for getting exchange currency ratesIn this tutorial, we will take a look at how we can get the current exchange rates and do some currency exchanges in JavaScript using our own free API at Algobook.
Get real time stock prices in your application for freeIn this tutorial, we will explore our own API that we have published here on Algobook that provides real time stock prices and price changes for free. Enjoy!