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/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=".js"></script>
<script src=".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>
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>
2 Answers
Reset to default 9I see the problem with scope of this, scope of this changes inside $http.get black, you need to make following changes:
methods: {
fetchData: function () {
var vm = this
this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID'),
function (data) {
vm.getTemp = data.main.temp;
}
}
}
You can also check my similar answer here.
I'd like to go with promises, and few other adjustments here, in your code
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')
.then(response => {
this.getTemp = response.data
// or like this this.getTemp = response.json()
})
}
}
})
;