49
rated 0 times
[
56]
[
7]
/ answers: 1 / hits: 28836
/ 8 Years ago, tue, december 20, 2016, 12:00:00
I'm new to JavaScript and Vue.js, and I'm having trouble accessing an api using Vue.js. The API I'm trying to access has JSON that looks like this:
{
coord: {
lon: -88.99,
lat: 40.51
},
weather: [
{
id: 800,
main: Clear,
description: clear sky,
icon: 01n
}
],
base: stations,
main: {
temp: 2.09,
pressure: 1022.3,
humidity: 69,
temp_min: 2.09,
temp_max: 2.09,
sea_level: 1052.03,
grnd_level: 1022.3
},
wind: {
speed: 12.66,
deg: 205.502
},
clouds: {
all: 0
},
dt: 1482203059,
sys: {
message: 0.186,
country: US,
sunrise: 1482239741,
sunset: 1482273134
},
id: 4903780,
name: Normal,
cod: 200
}
The API link on it's own works, but I do not think I'm accessing it when I run the program. Even when I don't try and parse the JSON and just display all the data collected from the api my variable is still empty. So, I must be doing something wrong to access the api. Also, after accessing the api, will parsing it like this work: for example, to access the tag temp => data.main.temp
var weather = new Vue({
el: '#weather',
data: {
getTemp: ''
},
created: function () {
this.fetchData();
},
methods: {
fetchData: function () {
this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID'),
function (data) {
this.getTemp = data.main.temp;
}
}
}
})
;
HTML code:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<script src=https://unpkg.com/vue/dist/vue.js></script>
<script src=https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js></script>
</head>
<body>
<div id=weather>
{{getTemp}}
</div> <!--end of weather-->
</body>
<script src=app.js></script>
</html>
More From » json
