Search⌘ K
AI Features
Home
Courses
Integrate the OpenWeatherMap APIs in JavaScript

Five Day Weather Forecast

Explore how to retrieve a five day weather forecast with data points every three hours using the OpenWeatherMap API. Learn to make API requests in JavaScript, handle responses, and parse forecast data for specific geographical locations.

We'll cover the following...

Overview

This API allows us to retrieve the weather forecast for a period of 5-days for any specific location. This forecast provides weather data collected after every 3-hour interval. We can retrieve the forecast data in the JSON and XML formats.

5-day/3-hour forecast

We’ll make a GET request to the following URI to get the 5-day/3-hour forecast data for a location of our choice:

http://api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}&appid={APP_ID}

Request parameters

Parameter

Type

Category

Description

APP_ID

string

required

This is our unique API key.

lat

decimal

required

This is the location’s latitude.

lon

decimal

required

This is the location’s longitude.

mode

string

optional

This refers to the format of the API response. Its default value is json. Its other possible value is xml.

cnt

integer

optional

This is the number of timestamps to retrieve.

units

string

optional

This refers to the units of measurement. Its possible values are standard, metric, and imperial. Its default value is standard.

lang

string

optional

This allows us to retrieve the output in our desired language.

Lines 16–17: We enter 47.6038321 and -122.3300624, the geographical coordinates for Seattle, United States, for the required parameters lat and lon, respectively.

Lines 19–23: We may enter other optional parameter(s) listed in the table above to the queryParameters object to fine-tune our results.

Click the “Run” button in the widget below to see the output.

Javascript (babel-node)
// Importing libraries here
import fetch from "node-fetch";
// Define APP ID here
const APP_ID = '{{APP_ID}}';
// Define endpoint URL here
const url = new URL(`http://api.openweathermap.org/data/2.5/forecast`);
// Define header parameters here
const headerParameters = {
  contentType: 'application/json',
};
// Define query parameters here
const lat = 47.6038321;
const lon = -122.3300624;
const queryParameters = new URLSearchParams({
  lat: lat.toString(),
  lon: lon.toString(),
  appid: APP_ID
});
// Setting API call options
const options = {
  method: 'GET',
  headers: headerParameters,
};
// Function to make API call
async function getForecasts() {
  try {
    url.search = queryParameters;
    const response = await fetch(url, options);
    // Custom function for printing the API response
    printResponse(response);
  } catch (error) {
    // Custom function for printing the error message
    printError(error);
  }
}
 
// Calling function to make API call
getForecasts();

Let’s take a quick look at the code given in the widget above:

  • Line 8: We define the URL for the 5-day/3-hour forecast endpoint.
  • Lines 32–43: We define a custom function getForecasts() to make an API call using fetch and handle any exception if it occurs. The printResponse() and printError() are custom functions to print the API response and errors, respectively.
  • Line 46: We invoke the getForecasts() function.

The output of the code above displays the 5-day weather forecast data for the specified location. It includes data collected after every 3-hour interval.

Response fields

Let’s look into the response fields generated by this endpoint.

Parameter

Type

Description

city.coord.lat

decimal

This is the location’s latitude.

city.coord.lon

decimal

This is the location’s longitude.

city.id

integer

This is the city's ID.

city.name

string

This is the city's name.

city.sunrise

integer

This is the time of sunrise. Its units are Unix and UTC.

city.sunset

integer

This is the time of sunset. Its units are Unix and UTC.

cnt

integer

This is the number of retrieved timestamps.

list.clouds.all

integer

This is the percentage of cloudiness. Its units are in percentage (%).

list.dt

integer

This is the time at which the data was forecasted. Its units are Unix and UTC.

list.main.feels_like

decimal

This specifies the temperature as per human perception. For default, the value is in Kelvin. For metric, the value is in Celsius. For imperial, the value is in Fahrenheit.

list.main.humidity

integer

This is the percentage of humidity. Its unit is percentage (%).

list.main.pressure

integer

This specifies the default atmospheric pressure at sea level. Its unit is hPa.

list.main.temp

decimal

This specifies the actual temperature. For default, the value is in Kelvin. For metric, the value is in Celsius. For imperial, the value is in Fahrenheit.

list.pop

integer

This is the precipitation probability. Its unit is percentage (%).

list.visibility

integer

This specifies the average visibility. Its unit is meters.

list.weather.description

string

This is the description of weather conditions.

list.weather.main

string

This specifies the weather parameters' group. Its sample values are Clear, Rain, Snow, and Extreme.

list.wind.speed

decimal

This is the wind speed. For default and metric, the value is in meter/second. For imperial, the value is in miles/hour.

list.rain.3h

integer

This is the volume of rain over the last 3 hours. Its unit is millimeters. Its value may be NULL.

list.snow.3h

integer

This is the volume of snow over the last 3 hours. Its unit is millimeters. Its value may be NULL.

Note: The above list of response fields is not exhaustive. Head over to the Additional Response Fields lesson in the Appendix for the remaining response fields for this endpoint.