I am currently trying to fetch API JSON data for a weather widget, but unfortunately it is returning null. While I am able to retrieve the JSON data successfully, I am struggling to handle this value.
Below is my HTML code snippet:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
/* $(document).ready(function(){
$.getJSON(url, function(json){
console.log(json.location.name);
})
})/*/
</script>
<div id="app" >{{Country}}</div>
<p v-if="isLoading">Loading</p>
<script type="text/javascript" src="./js/app.js"></script>
</body>
</html>
Here is my JavaScript code snippet:
window.addEventListener('load',()=>{
var app = new Vue ({
el: '#app',
data:{
Country : null,
Temp : null,
Icon : null,
isLoading : true,
},
created(){
var url ="http://api.apixu.com/v1/current.json?key=a69259fba9904700964121622190801&q=Nazilli";
$.getJSON(url,function(json){
console.log(json);
this.isLoading = false;
this.Country = json.location.name;
console.log(this.Country);
});
},
})
});