How to access an API with Vue.js?
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>
Answer
I 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.