API Demo
On this page we will go through a tutorial for you to get involved and learn hands-on. To get the most out of the demo, use Google Chrome and open the console. To open the console, right-click on the page, select Inspect, and select the Console tab.
If you've read the page on documentation and followed along with the tutorial, you are ready to begin practicing some code. Open your favorite text editor or IDE and write some JavaScript with us as we demonstrate using an API.
Before we get started, make sure you've completed the steps below.
- Create an account at OpenWeather to receive an API key (it can take a couple of hours for the key to work after they send you the email)
- Read through their documentation page to find out the specifics of their API
- Open your JavaScript file or Click to open a textbox area and Get ready to start coding!
Click the Show/Hide Textbox button to display or remove a moveable text box. Click the Save Typed Code button to save your code for later reference.
First, we will create some variables for the API URL, API key, latitude, and longitude. We will write these variables to the console log to make sure they are assigned correctly. Once you've written your code, click the button below to compare it to ours.
//declare variables to use in the API call
var lat = 33.749;
var lon = -84.388;
var apiKey = 'insert_your_api_key_here';
var apiUrl = 'https://api.openweathermap.org/data/2.5/onecall?lat=' + lat + '&lon=' + lon + '&appid=' + apiKey + '&exclude=hourly&units=imperial';
//log the variables to the console to make sure they work
console.log("Latitude: " + lat);
console.log("Longitude: " + lon);
console.log("API URL: " + apiUrl);
console.log("API key: " + apiKey);
Now that we have our variables assigned correctly, we will fetch the data and display it in the console.
- To use the fetch() method, we insert the API URL into the parentheses and append .then with a function inside to handle the response.
- Inside the {} we will convert the response into a JSON object and return it so we can manipulate the data.
- Now we will append another .then with a function containing a (data) parameter.
- Inside that function, we will console log the variables for Temperature and Wind Speed to make sure we are receiving a response.
Once you've created your code, open the console log and click the button below below to compare it to ours.
//declare variables to use in the API call
var lat = 33.749;
var lon = -84.388;
var apiKey = 'insert_your_api_key_here';
var apiUrl = 'https://api.openweathermap.org/data/2.5/onecall?lat=' + lat + '&lon=' + lon + '&appid=' + apiKey + '&exclude=hourly&units=imperial';
//fetch the data from the API
fetch(apiUrl)
.then(function (response) {
return response.json();
})
.then(function (data) {
//log the Temperature and Wind Speed to the console
console.log("Temp: " + Math.round(data.current.temp));
console.log("Wind: " + Math.round(data.current.wind_speed));
});
Now that we've verified the data, we will make a for loop with the daily data array and display the Max Temp and Wind Speed in the console.
- The for loop will be nested inside the second .then function and use an increment variable to select the array position.
- Let's round the return value to the nearest whole number for readability.
Once you've created your code, open the console log and click the button below below to compare it to ours.
//declare variables to use in the API call
var lat = 33.749;
var lon = -84.388;
var apiKey = 'insert_your_api_key_here';
var apiUrl = 'https://api.openweathermap.org/data/2.5/onecall?lat=' + lat + '&lon=' + lon + '&appid=' + apiKey + '&exclude=hourly&units=imperial';
//fetch the data from the API
fetch(apiUrl)
.then(function (response) {
return response.json();
})
.then(function (data) {
//loop through the array, round the values, and log the results to the console
for (var i = 0; i < 5; i++) {
console.log("Atlanta: " + i + " day(s) from now Max Temp: " + Math.round(data.daily[i].temp.max));
console.log("Atlanta: " + i + " day(s) from now Wind Speed: " + Math.round(data.daily[i].wind_speed));
}
});
So far, we've declared and verified variables, retrieved data using the fetch method, and produced a for loop to get information from an array in the response. Now it's time to take that data and display it on our page. We will create cards for the 5 day forecast and input data from the API call into them.
- We're going to use the jQuery and Bootstrap libraries to make creating and displaying the cards easier.
- Note: These changes should still be nested inside your 'for loop' before the closing curly bracket.
Once you've created your code, open the console log and click the button below below to compare it to ours.
//declare variables to use in the API call
var lat = 33.749;
var lon = -84.388;
var apiKey = 'insert_your_api_key_here';
var apiUrl = 'https://api.openweathermap.org/data/2.5/onecall?lat=' + lat + '&lon=' + lon + '&appid=' + apiKey + '&exclude=hourly&units=imperial';
//fetch the data from the API
fetch(apiUrl)
.then(function (response) {
return response.json();
})
.then(function (data) {
//loop through the daily date array (it contains 7 days, but we're only using 4), create the elements, and insert variables from the response
for (var i = 0; i < 5; i++) {
$("<div>", { class: "col w-20 d-inline-flex" })
.append(
$(
"<div class='card w-20'><img class='card-img-top mw-20' src='https://openweathermap.org/img/wn/" +
data.daily[i].weather[0].icon +
"@4x.png' alt='weather icon'><div class='card-body'><h5 class='card-title'>" +
moment.unix(data.daily[i].dt).format("M/DD/YYYY") +
"</h5><p class='card-text'>Temp: " +
Math.round(data.daily[i].temp.max) +
"°F</p><p class='card-text'>Wind: " +
Math.round(data.daily[i].wind_speed) +
" MPH</p>ltp class='card-text'>Humidity: " +
data.daily[i].humidity +
"</p></div></div></div>"
)
)
.appendTo($("#daily"));
});