One of the most common issues with displaying weather information on websites is the high cost of API access. Luckily, the National Weather Service provides free access to their JSON API with a lot of data available. In this guide, I am going to show you how to utilize the NWS JSON API for your weather needs.
Let’s Get Started
Getting started with this project is very easy as we will not be relying on any external JavaScript libraries, just pure JavaScript. Though this example is very basic, you can adapt it and create a very powerful web app as I did with my WeatherX app.
Create an HTML Page
This is the basic HTML for setting up our website to show the weather information. This template will display the weather information within the weather table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
table {
width: 800px;
}
#weather {
font-family: Verdana, sans-serif;
}
#weather td {
vertical-align: text-top;
padding-bottom: 8px;
}
#weather td:first-child {
padding-right: 10px;
font-weight: 600;
}
</style>
<title>My First Weather App</title>
</head>
<body>
<table id="weather"></table>
</body>
</html>
Add the JavaScript
Now that we have our basic HTML template, all we need to do is add our JavaScript code underneath the weather table tag.
var lat = "38.349819";
var lng = "-81.632622";
function addWeather( element, value ) {
var table = document.getElementById( "weather" );
var row = table.insertRow( -1 );
var cell1 = row.insertCell( 0 );
var cell2 = row.insertCell( 1 );
cell1.innerHTML = element + ":";
cell2.innerHTML = value;
}
function initWeather() {
fetch( 'https://forecast.weather.gov/MapClick.php?lat=' + lat + '&lon=' + lng + '&unit=0&lg=english&FcstType=json' )
.then( async response => {
const json = await response.json();
addWeather( "Location", json.location.areaDescription );
addWeather( "Temperature", json.currentobservation.Temp + "°" );
addWeather( "Wind", json.currentobservation.Winds + " mph" );
addWeather( "Humidity", json.currentobservation.Relh + "%" );
addWeather( "Dew Point", json.currentobservation.Dewp + "°" );
addWeather( "Barometer", json.currentobservation.SLP + " in" );
addWeather( "Visibility", json.currentobservation.Visibility + " mi" );
addWeather( "Forecast", json.data.text[0] );
});
}
The above code will fetch the JSON data from the National Weather Service website for the latitude (lat) and longitude (lng) of the location. Once the data is obtained, the individual JSON keys are parsed and then sent to the addWeather function. This function takes the parameters that it receives and creates a row with two columns for each call in the weather table. The first column contains the key of the JSON data, for example, the word Temperature. The second column contains the value of that key such as 63°.
In this example project, we are going to use the body tag of our HTML template to load the JavaScript after the page loads.
<body onload="initWeather()">
Our Final Project
We now have all the required code in place, so let's see what it looks like when it's all pulled together.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
table {
width: 800px;
}
#weather {
font-family: Verdana, sans-serif;
}
#weather td {
vertical-align: text-top;
padding-bottom: 8px;
}
#weather td:first-child {
padding-right: 10px;
font-weight: 600;
}
</style>
<title>My First Weather App</title>
</head>
<body onload="initWeather()">
<table id="weather"></table>
<script>
var lat = "38.349819";
var lng = "-81.632622";
function addWeather( element, value ) {
var table = document.getElementById( "weather" );
var row = table.insertRow( -1 );
var cell1 = row.insertCell( 0 );
var cell2 = row.insertCell( 1 );
cell1.innerHTML = element + ":";
cell2.innerHTML = value;
}
function initWeather() {
fetch( 'https://forecast.weather.gov/MapClick.php?lat=' + lat + '&lon=' + lng + '&unit=0&lg=english&FcstType=json' )
.then( async response => {
const json = await response.json();
addWeather( "Location", json.location.areaDescription );
addWeather( "Temperature", json.currentobservation.Temp + "°" );
addWeather( "Wind", json.currentobservation.Winds + " mph" );
addWeather( "Humidity", json.currentobservation.Relh + "%" );
addWeather( "Dew Point", json.currentobservation.Dewp + "°" );
addWeather( "Barometer", json.currentobservation.SLP + " in" );
addWeather( "Visibility", json.currentobservation.Visibility + " mi" );
addWeather( "Forecast", json.data.text[0] );
});
}
</script>
</body>
</html>
We have completed the guide for adding weather information to a website. If you have done everything correctly, your page should display information similar to the one below.
Helpful Tip
There is a lot more weather information available within the JSON data object than is used for this basic project. You can output the entire JSON data object to your console or visit the NWS JSON file to see what data is available to use.
function initWeather() {
fetch( 'https://forecast.weather.gov/MapClick.php?lat=' + lat + '&lon=' + lng + '&unit=0&lg=english&FcstType=json' )
.then( async response => {
const json = await response.json();
console.log( json );
addWeather( "Location", json.location.areaDescription );
addWeather( "Temperature", json.currentobservation.Temp + "°" );
addWeather( "Wind", json.currentobservation.Winds + " mph" );
addWeather( "Humidity", json.currentobservation.Relh + "%" );
addWeather( "Dew Point", json.currentobservation.Dewp + "°" );
addWeather( "Barometer", json.currentobservation.SLP + " in" );
addWeather( "Visibility", json.currentobservation.Visibility + " mi" );
addWeather( "Forecast", json.data.text[0] );
});
}
