Weather API (openweathermap) Showing Temperature Wrong

All in this code I'm trying to give user location and Temperature in locality But somehow temperature is showing way less in Celsius and also not updating below is what I tried like it is 4-5 Hours Back Data that to 10 degree Celsius less like if temp is 22(Celsius) hours back it is showing like 3(Celsius) working Example On codepen http://codepen.io/cannelflow/full/RrymYo/

var x = document.getElementById("demo");
var y = document.getElementById("demo1");
window.onload = getLocation();
//window.onload=getWeather();
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
//Location For Display
function showPosition(position) {
    var loc = { lat: position.coords.latitude, lon: position.coords.longitude };
    getWeather(loc);
    var baseURL = "https://maps.googleapis.com/maps/api/geocode/json?latlng=";
    var fullURL = baseURL + loc.lat + "," + loc.lon;
    $.ajax({
        url: fullURL,
        success: function (display) {
            x.innerHTML = display.results[1].formatted_address;
        }
    });

}
//Location For Weather
function getWeather(loc) {
    var baseURL = "http://api.openweathermap.org/data/2.5/weather?lat=";
    var appid = "064129b86c99c35c42d531db251b99e3";
    var fullURL = baseURL + loc.lat + "&lon=" + loc.lat + "&appid=" + appid + "&units=metric";
    //http://api.openweathermap.org/data/2.5/weather?lat=21.2600668&lon=81.5989561&appid=064129b86c99c35c42d531db251b99e3&units=metric
    $.ajax({
        url: fullURL,
        success: function (display1) {
            y.innerHTML = display1.main.temp;
        }
    });
}


function showError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}

<body>
    <section>
        <div class="container-fluid text-center">
            <br />
            <!-- <h1><button class="btn btn-danger" onclick="getLocation()">Click Me To Get Your Location!</button></h1> -->
            <h1 class="text-primary" id="demo1"></h1>
            <br />
            <h1 class="text-primary" id="demo"></h1>
        </div>
    </section>
</body>

Solution

You have a typo in the query string. A better alternative is to user jQuery.param to build the query string from an object instead as its easier to read and thus less error prone.

function getWeather(loc) {
  var baseURL = "http://api.openweathermap.org/data/2.5/weather?";
  return $.ajax({
    url: baseURL + $.param({
      appid: "064129b86c99c35c42d531db251b99e3",
      lon: loc.lon,
      lat: loc.lat,
      units: "metric"
    }),
    success: function(display1) {
      y.innerHTML = display1.main.temp;
    }
  });
}