Location and API not printing to console - Show the Local Weather App

Location and API not printing to console - Show the Local Weather App
0

#1

Hello fellow campers!

This is my first post, so hopefully it’s in the right place. I’m currently working on building a weather app for the Show the Local Weather project with some help from YouTube, but having a bit of trouble simply getting the API (with the coordinates of my current location) and the city location to print in the console. I know the API and key work because I’m able to display my coordinates using HTML. Any help would be appreciated! The code (API key edited out):

$(document).ready(function() {
  var longitude = "";
  var latitude = "";
  var farenheit = "";
  var celsius = "";
  var city = "";
  var weatherType = "";
  var kelvin = "";
  
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(posit) {
      $("#data").html("latitude: " + posit.coords.latitude + "longitude: " + posit.coords.longitude);
      
      longitude = posit.coords.longitude;
      latitude = posit.coords.latitude;
      
      
      var weatherAPI = 
'api.openweathermap.org/data/2.5/weather?lat='+latitude+'&lon='+longitude+'&APPID=#####';
      
      $.getJSON(weatherAPI, function(data) {
      //JSON call
      weatherType = data.weather[0].description;
      kelvin = data.main.temp;
      city = data.name;
      
      console.log(weatherAPI);
      console.log(city);
        
      //Kelvin to farenheit and celsius
      farenheit = (kelvin) * (9/5) - 459.67;
      celsius = kelvin - 273.15;
      });
    });
  }

});

#2

Does anything output to the console at all? You could also add an error handler to see if that catches anything.

$.getJSON(weatherAPI, function(data) {
      //JSON call
      weatherType = data.weather[0].description;
      kelvin = data.main.temp;
      city = data.name;
      
      console.log(weatherAPI);
      console.log(city);
        
      //Kelvin to farenheit and celsius
      farenheit = (kelvin) * (9/5) - 459.67;
      celsius = kelvin - 273.15;
      }, function(error) { // < second function passed to $.getJSON
          console.error(error);
      });

#3

There’s no output to the console at all. Should be noted that I’m working on Codepen, if that makes any difference.


#4

And by console, he is referring to the browser’s console (Ctrl+Shft+J in Chrome) and not the Codepen console.


#5

Could you please post your Codepen link here? You don’t need to format it in any way, just drop the link in a reply and it will load the project right here on the page.


#6

Thanks for the clarification. I’m getting a “failed to load resource: the server responded with a status of 404 ()” message.


#7

Here you go: https://codepen.io/beboptank/pen/gojpeK

Thanks for taking the time to look it over.


#8

@PortableStick @RandellDawson Looks like I found the answer to my own question. Codepen needs https:// for API calls and Open Weather Map only supports https:// for premium plans. I replaced it with the freeCodeCamp API and everything seems to be good now.

Thanks again for taking the time to help! :grinning: