How to display OpenWeatherMap API data in a jQuery DataTables
OpenWeatherMap API provides weather information of all cities around the world. In your website you can easily implement this API and show the weather information of any city.
The below links shows the DEMO of the Application. You can also download this application by using the below link:
It’s Free
The best part of OpenWeatherMap API is that it also offers free access to the Weather data which is limited to 60 Calls per minute to the API. If your website makes more than 60 calls per minutes, only then you have to pay for the API.
First create your free account on OpenWeatherMap API — URL (https://openweathermap.org/price).
Then get your API key from your account. You will use this Key to make API calls to the OpenWeatherMap API.
___________________________________________________________________
The below video shows the working of the Application which I am building:
___________________________________________________________________
Get Current Weather Details of 20 cities at a Go
Let’s create a powerful web page in HTML — “Yes in HTML Only”. In this page I will show all the weather information like Temperature, Min Temperature, Max Temperature, Humidity & Pressure, of 20 top cities of the world.
The cities which I have chosen are:
1. York
2. London
3. Yeeds
4. Bristol
5. Hamburg
6. Frankfurt
7. Berlin
8. Paris
9. Nantes
10. Madrid
11. Barcelona
12. Austin
13. Washington D.C.
14. Philadelphia
15. Boston
16. Albany
17. New York
18. Los Angeles
19. San Francisco
20. Seattle
The information of these Cities will be shown in Grid view format. To create this grid I will use jQuery DataTables which is an excellent plugin to display data in grid manner.
API Implementation Part
The URL to make API calls is
Note that I have added 20 cities Ids to this URL after the “?” like this -
id=2643741,2644688,2633352,2654675,2988507,2990969,2911298,2925535,2950159,3120501,3128760,5128581,4140963,4930956,5106834,5391959,5368361,5809844,4099974,4440906
Also added to it, is the appid, which is my API Key — appid=de6d52c2ebb7b1398526329875a49c57
The units=metric field added to the URL provides the temperature in Celsius.
Some important API docs links:
1. Current Weather Data — https://openweathermap.org/current
2. Id of cites around the world — http://openweathermap.org/help/city_list.txt
My HTML Page
The HTML page which I have created has a button, and on its click event I will show the weather details of these 20 cities.
I also have a table which will be converted to grid by jQuery DataTables plugin. Then it will show the weather information in it.
<button id="submitButton">Get Weather</button>
<table id="weatherTable"></table>Making API calls with jQuery
Let us build the jQuery code in step by step manner:
- First add the jQuery & DataTables script on your web page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
2. The API call will be made on the button click event.
$("#submitButton").click(function (e) {.....api call});
3. To call the API I will use jQuery .ajax() Method, and this will give me the weather information (response by the API) in JSON Format.
$("#submitButton").click(function (e) {$.ajax({type: "POST",url: "http://api.openweathermap.org/data/2.5/group?id=2643741,2644688,2633352,2654675,2988507,2990969,2911298,2925535,2950159,3120501,3128760,5128581,4140963,4930956,5106834,5391959,5368361,5809844,4099974,4440906&appid=de6d52c2ebb7b1398526329875a49c57&units=metric",dataType: "json",success: function (result, status, xhr) {//code});},error: function (xhr, status, error) {alert("Error: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)}});});
4. Inside the success callback function of the .ajax() method, I will get the JSON on the result parameter. The format of this JSON is:
{"cnt": 20,"list": [{"coord": {"lon": -0.09,"lat": 51.51},"sys": {"type": 1,"id": 5091,"message": 0.018,"country": "GB","sunrise": 1515484991,"sunset": 1515514350},"weather": [{"id": 721,"main": "Haze","description": "haze","icon": "50d"},{"id": 701,"main": "Mist","description": "mist","icon": "50d"},{"id": 300,"main": "Drizzle","description": "light intensity drizzle","icon": "09d"}],"main": {"temp": 4.63,"pressure": 1006,"humidity": 93,"temp_min": 4,"temp_max": 5},"visibility": 3500,"wind": {"speed": 2.6,"deg": 90},"clouds": { "all": 90 },"dt": 1515502320,"id": 2643741,"name": "City of London"},{"coord": {"lon": -1.55,"lat": 53.8},"sys": {"type": 1,"id": 5062,"message": 0.006,"country": "GB","sunrise": 1515486020,"sunset": 1515514024},"weather": [{"id": 721,"main": "Haze","description": "haze","icon": "50d"},{"id": 701,"main": "Mist","description": "mist","icon": "50d"}],"main": {"temp": 3.39,"pressure": 1007,"humidity": 93,"temp_min": 3,"temp_max": 4},"visibility": 5000,"wind": {"speed": 2.6,"deg": 150},"clouds": { "all": 90 },"dt": 1515502320,"id": 2644688,"name": "Leeds"},{"coord": {"lon": -1.08,"lat": 53.96},"sys": {"type": 1,"id": 5062,"message": 0.0063,"country": "GB","sunrise": 1515485958,"sunset": 1515513860},"weather": [{"id": 721,"main": "Haze","description": "haze","icon": "50d"},{"id": 701,"main": "Mist","description": "mist","icon": "50d"}],"main": {"temp": 3.71,"pressure": 1007,"humidity": 93,"temp_min": 3,"temp_max": 4},"visibility": 5000,"wind": {"speed": 2.6,"deg": 150},"clouds": { "all": 90 },"dt": 1515502320,"id": 2633352,"name": "York"},.........]}
5. Clearly it contains a lot of information, but since I want only some important weather information, therefore I will extract important information from this API.
To store these important weather information I will create a new variable which will store these values in JSON format.
I will create a new function that will get the OpenWeatherMap API JSON on it’s parameter. It then loop over them and extract the important info.
function CreateWeatherJson(json) {var newJson = "";for (i = 0; i < json.list.length; i++) {cityId = json.list[i].id;cityName = json.list[i].name;temp = json.list[i].main.temppressure = json.list[i].main.pressurehumidity = json.list[i].main.humiditytempmin = json.list[i].main.temp_mintempmax = json.list[i].main.temp_maxnewJson = newJson + "{";newJson = newJson + "\"cityId\"" + ": " + cityId + ","newJson = newJson + "\"cityName\"" + ": " + "\"" + cityName + "\"" + ","newJson = newJson + "\"temp\"" + ": " + temp + ","newJson = newJson + "\"pressure\"" + ": " + pressure + ","newJson = newJson + "\"humidity\"" + ": " + humidity + ","newJson = newJson + "\"tempMin\"" + ": " + tempmin + ","newJson = newJson + "\"tempMax\"" + ": " + tempmaxnewJson = newJson + "},";}return "[" + newJson.slice(0, newJson.length - 1) + "]"}
Note — I will call this CreateWeatherJson() from inside the success callback of the .ajax() method, like this:
res = CreateWeatherJson(result);
6. Now finally inside the success callback method of .ajax(), add the code for DataTables. This code will show the information in grid manner.
$("#weatherTable").append("<thead><tr><th>City Id</th><th>City Name</th><th>Temperature</th><th>Min Temp</th><th>Max Temp</th><th>Humidity</th><th>Pressure</th></thead></table>");$('#weatherTable').DataTable({data: JSON.parse(res),columns: [{ data: 'cityId' },{ data: 'cityName' },{ data: 'temp' },{ data: 'tempMin' },{ data: 'tempMax' },{ data: 'pressure' },{ data: 'humidity' }],"pageLength": 5});
jQuery DataTables in Action
The DataTables will show the information in grid manner with search, sorting and paging features available too. The information will be presented in a beautiful manner which the users will like very much.
This is how it will look.
Full jQuery Code
The full code in jQuery is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script><script type="text/javascript">$(document).ready(function () {$("#reset").click(function (e) {location.reload();});$("#submitButton").click(function (e) {$.ajax({type: "POST",url: "http://api.openweathermap.org/data/2.5/group?id=2643741,2644688,2633352,2654675,2988507,2990969,2911298,2925535,2950159,3120501,3128760,5128581,4140963,4930956,5106834,5391959,5368361,5809844,4099974,4440906&appid=de6d52c2ebb7b1398526329875a49c57&units=metric",dataType: "json",success: function (result, status, xhr) {res = CreateWeatherJson(result);$("#weatherTable").append("<thead><tr><th>City Id</th><th>City Name</th><th>Temperature</th><th>Min Temp</th><th>Max Temp</th><th>Humidity</th><th>Pressure</th></thead></table>");$('#weatherTable').DataTable({data: JSON.parse(res),columns: [{ data: 'cityId' },{ data: 'cityName' },{ data: 'temp' },{ data: 'tempMin' },{ data: 'tempMax' },{ data: 'pressure' },{ data: 'humidity' }],"pageLength": 5});},error: function (xhr, status, error) {console.log("Error: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)}});});function CreateWeatherJson(json) {var newJson = "";for (i = 0; i < json.list.length; i++) {cityId = json.list[i].id;cityName = json.list[i].name;temp = json.list[i].main.temppressure = json.list[i].main.pressurehumidity = json.list[i].main.humiditytempmin = json.list[i].main.temp_mintempmax = json.list[i].main.temp_maxnewJson = newJson + "{";newJson = newJson + "\"cityId\"" + ": " + cityId + ","newJson = newJson + "\"cityName\"" + ": " + "\"" + cityName + "\"" + ","newJson = newJson + "\"temp\"" + ": " + temp + ","newJson = newJson + "\"pressure\"" + ": " + pressure + ","newJson = newJson + "\"humidity\"" + ": " + humidity + ","newJson = newJson + "\"tempMin\"" + ": " + tempmin + ","newJson = newJson + "\"tempMax\"" + ": " + tempmaxnewJson = newJson + "},";}return "[" + newJson.slice(0, newJson.length - 1) + "]"}});</script>
Conclusion
I hope you liked my tutorial. I have provided the demo links for this web page. You can also download this web page (from another link which is given inside the demo link).
I only publish 2 articles per week. Follow me to get my weekly email list of my new articles published on Medium.
If this post was helpful, please click the clap button below a few times to show your support! It will bring a smile on my face and motivate me to write more for the readers of medium community.
Thank You!
Yogi
Web Developer for 12 years
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
