Having trouble with $.get in JavaScript

Question

I'm a newbie to JavaScript. Now that I got that out of the way, I'm experiencing a very weird error. I'm building an application to show the current weather at your location, and to do this I needed to make an API call for the weather data. I got the weather data from here and at first, my code was working and getting the local weather (for a given latitude and longitude). However, I was making edits to my code to add functionality and my code suddenly stopped working. I tried to fix it but I'm flummoxed, I have no idea what I broke. I'm hoping you guys can help!!

Here is my code for reference:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        lat = position.coords.latitude;
        long = position.coords.longitude;
        console.log(lat);
        $.get('http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&appid=00d71b03a3c50910d8f4f0ea51703bb5', function(data) {
            console.log(data);
            if(lat == 300 || long == 300) {
                alert("Enable your location to see how the weather is");
            } else {
                $("#location").text(data.name);
                var weather = data.weather[0].description;
                $("#weather").text(weather);
                temp = Math.round((data.main.temp - 273.15) * 10) / 10.0;
                $("#temperature").text(temp + "\u00B0 C");
                var icon = data.weather[0].icon;
                $("#picture").attr("src", "http://openweathermap.org/img/w/" + icon + ".png");
            } 
        });
    });
};

I put a console.log(data) below the API call to see what is happening, but it doesn't output anything. Very confused, please help!

Answer 1

I run this code in firefox and get json data from api.openweathermap.org

Check if your browser support navigator.geolocation and permit share your location.

---

the following snippet overrides navigator.geolocation.getCurrentPosition and invokes the inner fn with .bind to force it fire.

$(document).ready(function() {
    var appId = "00d71b03a3c50910d8f4f0ea51703bb5";
    if (navigator.geolocation) {

        // TODO: remove this for production. DEMO/DEBUG usage
        navigator.geolocation.getCurrentPosition = function(fn)  {
            fn.bind(this, { coords : { latitude : 51.507351, longitude : -0.127758 }})();
        }; 

        navigator.geolocation.getCurrentPosition(function(position) {
            try {
          
                lat = position.coords.latitude;
                long = position.coords.longitude;
    
                $.get('//api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&appid=' + appId, function(data) {
                    console.log("data := %o", data);        
    
                    if(lat == 300 || long == 300) {
                        alert("Enable your location to see how the weather is");
                    } else {
                        $("#location").text(data.name);
                        var weather = data.weather[0].description;
                        $("#weather").text(weather);
                        temp = Math.round((data.main.temp - 273.15) * 10) / 10.0;
                        $("#temperature").text(temp + "\u00B0 C");
                        var icon = data.weather[0].icon;
                        $("#picture").attr("src", "//openweathermap.org/img/w/" + icon + ".png");
                    } 
                });
            } catch(error) {
                console.log("err := %o", error);
            }            
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="location">Location</label><span id="location"></span>
<label for="weather">Weather</label><div id="weather"></div>
<label for="temperature">Temperature (F)</label><span id="temperature"></span>
<img id="picture" src="" width="200px" height="200px" />