How to Fetch Weather Forecast Using AccuWeather API in JavaScript

Setup Your Environment

• Ensure you have Node.js installed on your system, as it provides the runtime environment for executing JavaScript code outside the browser.

 

• Choose an appropriate code editor like Visual Studio Code or any other of your preference, which supports JavaScript development.

Explore AccuWeather API Key and Endpoints

• Identify the necessary APIs you require for your weather forecast data, typically including endpoints for querying city locations, current conditions, and forecasts.

 

• Generate or retrieve your AccuWeather API key, which will be used for authentication in your API requests.

Import Required Modules

• Consider using modern JavaScript libraries like Axios for making HTTP requests. Axios is a promise-based HTTP client, which simplifies asynchronous calls to the API.

// Importing the axios library for HTTP requests
const axios = require('axios');

Fetch Location Key

• AccuWeather requires a location key to fetch weather data for a specific location. Use the location search endpoint to get the key by passing the city or region name.

async function getLocationKey(city) {
  const apiKey = 'YOUR_ACCUWEATHER_API_KEY';
  const locationUrl = `http://dataservice.accuweather.com/locations/v1/cities/search?apikey=${apiKey}&q=${city}`;

  try {
    const response = await axios.get(locationUrl);
    const locationKey = response.data[0].Key;
    return locationKey;
  } catch (error) {
    console.error('Error fetching location key:', error);
    return null;
  }
}

Retrieve the Weather Forecast

• Once you have the location key, use it to request the weather forecast data from the AccuWeather API forecast endpoint.

async function getWeatherForecast(locationKey) {
  const apiKey = 'YOUR_ACCUWEATHER_API_KEY';
  const forecastUrl = `http://dataservice.accuweather.com/forecasts/v1/daily/5day/${locationKey}?apikey=${apiKey}`;

  try {
    const response = await axios.get(forecastUrl);
    const forecasts = response.data.DailyForecasts;
    return forecasts;
  } catch (error) {
    console.error('Error fetching weather forecast:', error);
    return null;
  }
}

Integrate and Use the Functions

• Create a main function to orchestrate the fetching of location keys and subsequent fetch of the weather data.
• Handle promises appropriately and display the results as per your application's needs.

async function displayWeatherForecast(city) {
  const locationKey = await getLocationKey(city);
  if (!locationKey) {
    console.log('Invalid city or unable to retrieve location key.');
    return;
  }

  const forecasts = await getWeatherForecast(locationKey);
  if (forecasts) {
    console.log(`Weather forecasts for ${city}:`);
    forecasts.forEach(forecast => {
      console.log(`Date: ${forecast.Date}, Min: ${forecast.Temperature.Minimum.Value}°${forecast.Temperature.Minimum.Unit}, Max: ${forecast.Temperature.Maximum.Value}°${forecast.Temperature.Maximum.Unit}`);
    });
  }
}

// Example call
displayWeatherForecast('New York');