kimpster kimpster - 1 month ago 15
HTML Question

script not responding to open weather api

I am attempting to use geolocations to get current coordinates and then input that into the open weather api to get data back and display it through html.

This is my script:

var lat =0;
var long =0;
function getLocation(){
var x = document.getElementByID('demo');
if (navigator.gelocation){
navigator.gelocation.getCurrentPosition(function(position){
lat = position.coords.latitude;
long = position.coord.longitude;
$('#coord').html('Here:'+lat+ 'here'+long);
});
} else {
x.innerHTML= 'Geolocation not supported';
}
};

function getWeather(callback){
$.ajax({
dataType:"jsonp",
url:'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&APPID=f2d2480cdd1ef46b9f10dd6860cb1a3e',
succes: callback
});
}
getWeather(function(data){
var temp = data.main.temp;
var description = data.weather[0].description;
$("#temp").html(data.main.temp);
$('#desc').html(data.weather[0].description);
});

$('document').ready(function(){
getLocation();
getWeather();
});


and this is the html:

<div id = "city">
<h4>city</h4>
</div>
<div id="temp">
<h4>temp</h4>
</div>
<div id= "desc">
<h4>description</h4>
</div>
<div id= "coord">
<h4>coord</h4>
</div>


I am currently doing this project on codepen.io here's the link I am really unsure of what I am doing wrong. I've looked at other example codes out there too and I can't spot the mistake I am making. Could I please get some help as to why the code seem to not respond.

Answer

There are several minor issues with the code. Things that you could've figure out yourself if you looked a bit closely.

  1. Thing that I found is that you were having a typo when returning the callback on getWeather function:

    function getWeather(callback){
      $.ajax({
        dataType:"jsonp",
        url:'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&APPID=f2d2480cdd1ef46b9f10dd6860cb1a3e',
        succes: callback
      });
    }
    

Your mistake is here: succes: callback, it should be success.

  1. Is that you put single quotes on $('document').ready(function(). Remove the single quotes around document.

  2. You had another typo here: var x = document.getElementByID('demo');, it should be var x = document.getElementById('demo');

3.Another problem you had was that you misplaced one of your id's again. You where trying to call demo but there was not one specified:

 var x = document.getElementById('demo');

Instead you should put down the coord id that you are using for geolocation like this: var x = document.getElementById('coord');