Local Weather API call problems

Local Weather API call problems
0

#1

Hi, I’m having a bit of trouble with the API call for the weather app. Here is my code:

$(document).ready(function() {
  var desc;
  var location;
  var condition;
  var temp;
  var lati;
  var long;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      lati = position.coords.latitude;
      long = position.coords.longitude;
    });
  }

  function getWeather() {
    $.ajax({
      url: "http://api.openweathermap.org/data/2.5/weather lat=" + lati + "&lon=" + long + "&APPID=7d8a67b75d7c6055ec28b2ccca42d989",
      success: function(response) {
        desc = response.sys.country;
        $('#location1').text(desc);
        location = response.name;
        $('#location').text(location);
        condition = response.weather[0].description;
        $('#condition').text(condition);

        if (condition == "clear sky") {
          $('#weatherpic').attr("src", "http://img11.deviantart.net/786e/i/2009/089/d/c/clear_sky_by_sed_rah_stock.jpg");
        } else if (condition == "few clouds") {
          $('#weatherpic').attr("src", "https://image.freepik.com/free-photo/blue-sky-with-a-few-clouds_2662062.jpg");
        } else if (condition == "scattered clouds") {
          $('#weatherpic').attr("src", "https://c1.staticflickr.com/3/2106/1909487867_de140c7eb8_b.jpg");
        } else if (condition == "broken clouds") {
          $('#weatherpic').attr("src", "http://australiasevereweather.com/photography/photos/1995/0605jd02.jpg");
        } else if (condition == "shower rain") {
          $('#weatherpic').attr("src", "https://cdn.empowernetwork.com/user_images/post/2014/03/29/9/73/5b12/540x293_20140329_9735b12e909f88d550031c5218024768_png.png");
        } else if (condition == "rain" || "moderate rain") {
          $('#weatherpic').attr("src", "http://efdreams.com/data_images/dreams/rain/rain-07.jpg");
        } else if (condition == "thunderstorm") {
          $('#weatherpic').attr("src", "http://www.homeadvisor.com/r/wp-content/uploads/2015/03/Dollarphotoclub_43826198-1024x680.jpg");
        } else if (condition == "snow") {
          $('#weatherpic').attr("src", "http://weknowyourdreams.com/image.php?pic=/images/snow/snow-04.jpg");
        } else if (condition == "mist") {
          $('#weatherpic').attr("src", "http://vignette1.wikia.nocookie.net/demigodshaven/images/f/f5/Mist.jpg/revision/latest?cb=20110102163040");
        }

        temp = response.main.temp - 273.15;
        var temprounded = Math.round(temp * 10) / 10;
        $('#temp').text(temprounded + ' celcius');
        $("#CTOF").on("click", function() {
          $('#temp').text((temprounded * (1.8)) + 32 + " Fahrenheit")

        });
        $("#FTOC").on("click", function() {
          $('#temp').text(temprounded + " cELCIUS")

        });
      }

    });

  }
  getWeather()
});

this code works if I enter a lat and lon value in the api call, however when I try to use the values from the browser as in the code above it does not work for some reason. Am I inserting the lati and long variables in to the url correctly?
Thanks.


#2

Are you using Chrome? There an issue with getting geolocation coordinates through CodePen if you are on Chrome. When I was working on this issue, I remember seeing a ton of posts here in the forum on this topic. You may try doing a search and reading through some of them.


#3

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.