Fetch Weather

Retrieves the current weather using an external weather API.

Intermediate Last updated: 03 Apr 2025

Open Example Preview

About

In this example, we demonstrate how to fetch the current weather data for specified locations, then populate a repeater to display the weather data.

APIs

• $w.Repeater API
• $w.VectorImage API
• $w.Container API
• $w.Text API

How we built it

We added the following to our site:

Page Elements

Home

• A repeater for displaying weather data for multiple locations.
• Containers for applying custom CSS classes to set background colors for each repeater item based on location temperature.
• Text elements to display data such as location, temperature, and weather conditions.
• Vector images to visually represent the weather conditions with icons.

Frontend Code

Home

The code in this file initializes the page’s elements, retrieves weather data of specific locations from the backend, and then fills a repeater with the weather data.

In this file, we: 

• Retrieve the weather data for multiple predefined locations from the backend and set it as the repeater’s data array.

• Define a weather description map that matches the possible weather descriptions with their corresponding icon URLs. 

• Populate the repeater with content from the repeater's data array, including the following:

  • Location name, temperature, wind speed, humidity, and the weather description.
  • Weather icons based on the weather description.

• Convert temperature from Fahrenheit to Celsius for display. 

• Set the background CSS styling of the repeater items based on the temperature. 

• Handle errors for failed data requests by displaying “N/A” for text elements and by hiding the weather icons.

global.css

This file defines the styles for the background colors of the repeater item containers based on the location temperature. Each custom CSS class corresponds to a specific temperature range defined in the Home page code.

Backend Code

getWeatherData.web.js

The code in this file retrieves weather data for specific locations from the National Weather Service API. We defined the following method:

• `getWeatherData()`: Defines an array of locations and makes asynchronous API calls to the weather service using the native `fetch()` API. This method retrieves the weather data for each location, stores the data in objects, and returns an array of these data objects after all locations’ data have been retrieved.

Code Snippets

Get Help

Join the community

Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.