JSON content from API not shown in html page

Question

I am building this simple app where I am getting a JSON from an open weather API and displaying some of its content in the html using jQuery. Now the problem is that even though I pass the correct url inside $getJSON() I can't display anything. The link to the github repo is: https://github.com/gerak1925/local_weather

Incase you only want the code here you go:

var lat, lon;
var url = "";

function processJSON(url)
{
    $.getJSON(url, function(obj)
    {
        var temper = parseFloat(obj.main.temp) - 273.15;
        var weatherIcon = 'http://openweathermap.org/img/w/' + obj.weather[0].icon + '.png';

        $('#content').html('<p>' + temper.toString() + ' <span id="unit">Celsius</span></p>');
        $('#content').append("<p>" + obj.weather[0].description + "</p>");
        $('#content').append("<p>" + obj.main.humidity + " humidity</p>");
        $('#content').append('<p><img src="' + weatherIcon + '" /></p>');
    });
}

function geoFind()
{
    var output = document.getElementById("content");

    $('button').hide();

    if (!navigator.geolocation) 
    {
        output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
        return;
    }

    function success(position) 
    {
        lat  = position.coords.latitude;
        lon = position.coords.longitude;

        url = "api.openweathermap.org/data/2.5/weather?lat=" + lat.toString() + "&lon=" + lon.toString() + "&APPID=5b1a0c598f588ad14577a6cfc89433b2";
    };

    function error() 
    {
        output.innerHTML = "Unable to retrieve your location";
    };

    output.innerHTML = "<p>Locating…</p>";

    navigator.geolocation.getCurrentPosition(success, error);
}

$('button').on('click',geoFind);
processJSON(url);

The necessary html is:

<div id="content">

</div>
<button class="btn btn-default">Generate Weather</button>

The JSON I get is:

{
  "coord": {
    "lat": 36.69,
    "lon": 23.04
  },
  "weather": [
    {

      "id": 801,
      "main": "Clouds",
      "description": "few clouds",
      "icon": "02d"
    }
  ],
  "base": "cmc stations",
  "main": {

    "temp": 299.451,
    "pressure": 1023.76,
    "humidity": 93,
    "temp_min": 299.451,
    "temp_max": 299.451,
    "sea_level": 1025.84,
    "grnd_level": 1023.76
  },
  "wind": {

    "speed": 2.51,
    "deg": 48.5054
  },
  "clouds": {
    "all": 12

  },
  "dt": 1467905351,
  "sys": {

    "message": 0.0059,
    "country": "GR",
    "sunrise": 1467861381,
    "sunset": 1467913755
  },
  "id": 251465,
  "name": "Gefyra",
  "cod": 200

}

Ps. Yes, I've read similar posts even for same apps but with no luck.

Answer 1

Try changing the getJSON call to the following as POST is expected here.

$.post(url, function(obj)
    {
        var temper = parseFloat(obj.main.temp) - 273.15;
        var weatherIcon = 'http://openweathermap.org/img/w/' + obj.weather[0].icon + '.png';

        $('#content').html('<p>' + temper.toString() + ' <span id="unit">Celsius</span></p>');
        $('#content').append("<p>" + obj.weather[0].description + "</p>");
        $('#content').append("<p>" + obj.main.humidity + " humidity</p>");
        $('#content').append('<p><img src="' + weatherIcon + '" /></p>');
    },'json');

Answer 2

Assuming the code you've provided is the code you're using, you're not setting url until after you've already attempted the lookup:

$('button').on('click',geoFind);
processJSON(url);  // at this point url is still blank

Confirm this by changing the process function to:

function processJSON(url)
{
    alert(url);

Because the code uses callbacks, you'll need to call processJSON after you've set the url, in the success callback of the geolocation lookup:

function success(position) 
{
    lat  = position.coords.latitude;
    lon = position.coords.longitude;

    url = "api.openweathermap.org/data/2.5/weather?lat=" + lat.toString() + "&lon=" + lon.toString() + "&APPID=5b1a0c598f588ad14577a6cfc89433b2";

    processJSON(url); 
};