Skip to content

Using Vue.js with Axios to Fetch Current Weather Data from WU API

License

Notifications You must be signed in to change notification settings

nick3499/current_weather_wu_vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 

Repository files navigation

current_weather_wu_vue

Current weather conditions data is requested from Weather Underground API through the axios http requests client. The browser gets the weather data in JSON format. axios also parses that JSON. The Web interface is then rendered by vue.js. See example image below.

Note: Weather Underground no longer provides free weather API keys!

Example Image

example

Vue Script

The JSON data for current weather conditions is collected in results: [].

const url = 'https://api.wunderground.com/api/ad8ef392afe1e78f/conditions/q/IL/pws:KILMORRI2.json'
const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    axios.get(url).then(response => {
      this.results = response.data
    })
  }
});

Template System

Vue.js uses a mustache-style template system. See syntax example below:

<p><span>UV:</span> {{ results.current_observation.UV }}</p>

In the line example above, UV data is rendered to the display thru the path results.current_observation.UV since response.data was stored in results (all of the current weather conditions data). WU API's own current weather data is stored in the object current_observation. So current_observation.UV contains the numerical value for the current UV level.

API Key with Sub

A personal API key comes with a free subscription to Weather Underground. Usage limits apply.

Personalize URL

To personalize the URL, a few specs need to change.

https://api.wunderground.com/api/ad8ef392afe1e78f/conditions/q/IL/pws:KILMORRI2.json

  1. ad8ef392afe1e78f needs to change to your personal API key.
  2. IL needs to change to your home state code.
  3. pws:KILMORRI2 needs to change to your local weather station code.

It would also be good practice to create three variables for URL concatenation and insertion.

ko-fi

About

Using Vue.js with Axios to Fetch Current Weather Data from WU API

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages