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!
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
})
}
});
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.
A personal API key comes with a free subscription to Weather Underground. Usage limits apply.
To personalize the URL, a few specs need to change.
https://api.wunderground.com/api/ad8ef392afe1e78f/conditions/q/IL/pws:KILMORRI2.json
ad8ef392afe1e78f
needs to change to your personal API key.IL
needs to change to your home state code.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.