Weather App isn't working... Can someone help me understand why?


#1

Here is my code:

var lat, lon

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

function noLocation() {
  document.getElementById("#data").innerHTML = "";
  alert("Sorry, we can not find your location.");
} 

function setElement(data) {
  document.getElementById("#data").innerHTML = data;
}

function getWeather() {
  if (lat && lon) {
    var apiKey = "2db9452f6f5d46d554721c08bfe1ab13";
    var url = "https://api.darksky.net/forecast/";
    var cors = "https://cors-anywhere.herokuapp.com/";
    //var full = cors + url + apiKey + "/" + lat + "," + lon + "?exclude=currently,hourly,flags";
    //var full = cors + url + apiKey + "/" + lat + "," + lon;
    var full = url + apiKey + "/" + lat + "," + lon;
    $.getJSON(full + "output=jsonp&callback=?", setElement);
  }
}

$(document).ready(function () {
  //unsupported browser alert
  if (!navigator.geolocation) {
    alert("Your Browser does not support Geolocation, sorry!")
  }

  else {
    navigator.geolocation.getCurrentPosition(getLocation, noLocation);  
         
    //click-event handler
    $("#weatherbtn").click(getWeather);
  }
});

#2

Link to my Codepen: https://codepen.io/MissLisaMN/pen/owBKeQ Please note this is still very much a work in progress…


#3

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

Can you post a link to your codepen? Have you checked your browser console for errors?


#4

I like that you have your code organized into several functions. It’s going to make it easier to manage.

Here are some issues to fix.

  1. Navigator.geolocation is asynchronous, so unfortunately, we can’t use global variables like you’re trying to do. Your getLocation() function will need to pass the latitude and longitude as arguments to the getWeather() function.

  2. In your getWeather function, remove the output=json from the URL - that isn’t a valid URL parameter for Dark Sky. Your getJSON can simply be:

  3. In your setElement function, replace #data with data - we don’t use the # sign for an ID with document.getElementById.

  4. Last but not least, your #weatherbtn is going to call the getWeather function without getting location first - wrap your navigator.geolocation code in a function and call that with your weather button.

To answer your last question, display all the JSON nicely by stringify()'ing the data inside of <pre> tags:

function setElement(data) {
  document.getElementById("data").innerHTML = "<pre>" + JSON.stringify(data, null, 2) + "</pre>"
}


Spoiler Code in a CodePen

https://codepen.io/anon/pen/xLLqay?editors=0010


#5

Sure! Edited my first reply to add my link, Thanks, btw.