Using JQuery with DarkSky API - Not Pulling Data

Question

I am trying to run a JavaScript/JQuery function that pulls the timezone field from a JSON request from the DarkSky API. Currently, my code works by getting the lat and long and passing them into the URL so that the JSON can be received from the DarkSky API.

Currently, I have verified that I am getting lat and long variables and also that the URL is correct and received JSON. However, I am unable to place the timezone field into the tag within my webpage.

Below is my source code:

HTML:

<p id="timezone">Summary</p>
<span class="weather-location" id="currentLocation">Current Location</span>

Javascript/JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    var currentLoc = document.getElementById("currentLocation");
    var tz = document.getElementById("timezone");
    var url = "";

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            currentLoc.innerHTML = "Geolocation is not supported by this browser.";
        }
    }
    function showPosition(position) {
        var lat = position.coords.latitude;
        var long = position.coords.longitude;

        currentLoc.innerHTML = "Latitude: " + lat +
            "<br>Longitude: " + long;

        url = "https://api.darksky.net/[API_KEY]/" + lat + "," + long;

        getTodaysWeather(url);
    }

    function getTodaysWeather(url) {
        $(document).ready(function () {
            $.getJSON(url, function (results) {
                tz.innerHTML = results.timezone;
            });
        });
    }


</script>

EDIT:

Below is a snippet of the JSON I have pulled:

{ "latitude": 39.9145429, "longitude": -86.02194999999999, "timezone": "America/Indiana/Indianapolis", "currently": { "time": 1534743029, "summary": "Clear", "icon": "clear-night", "nearestStormDistance": 8, "nearestStormBearing": 219, "precipIntensity": 0, "precipProbability": 0, "temperature": 70.61, "apparentTemperature": 71.17, "dewPoint": 64.44, "humidity": 0.81, "pressure": 1014.05, "windSpeed": 5.1, "windGust": 9.07, "windBearing": 100, "cloudCover": 0.12, "uvIndex": 0, "visibility": 10, "ozone": 295.59 }, "minutely": { "summary": "Clear for the hour.", "icon": "clear-night", "data": [ { "time": 1534743000, "precipIntensity": 0, "precipProbability": 0 },

...............

Answer 1

here's a working code snippet ...

/* insert your secret here */
var secret = "";

var baseUrl = "https://api.darksky.net/forecast/" + secret + "/";
var defLat = 37.8267; var defLng = -122.4233;

$(function() {

  if (navigator.geolocation) {
    console.log('browser geolocation would be theoretically supported by the browser.');
    navigator.geolocation.getCurrentPosition((loc) => {
      fetchData(baseUrl + loc.coords.latitude + ',' + loc.coords.latitude);
    },
    function (error) { 
      if (error.code == error.PERMISSION_DENIED) {
        console.log("geolocation request had been denied; check your browser\'s settings (this does not work in such a code snippet).");
        console.log("looking up the default location instead, which is " + defLat + ', ' + defLng + ".");
        $("#currentLocation").html("Latitude: " + defLat + ', Longitude: ' + defLng);
        fetchData(baseUrl + defLat + ',' + defLng);
      }
    });
  } else {
      $("#currentLocation").html("Geolocation is not supported by this browser.");
      console.log("geolocation not supported");
  }
});

function fetchData(url) {
  $.ajax({
    url: url,
    dataType: 'jsonp',
    crossDomain: true,
    success: function(data, status) {
      if(status === 'success') {
        $("#currentLocation").html("Latitude: " + data.latitude + ', Longitude: ' + data.longitude + ', Timezone: ' + data.timezone);
        console.log(data);
      }
    }
  });
}

html, body {
  height: 100%;
  width: 100%;
}

div#currentLocation {
  background-color: #CCCCCC;
  vertical-align: center;
  width: 100%;
  padding: 8px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="currentLocation"></div>

Answer 2

Maybe you should try the link? I think the API should include the forecast as I try from the document example from darksky.

https://api.darksky.net/forecast/[API_Key]/lon,lat

I also found error "No 'Access-Control-Allow-Origin' header is present on the requested resource." when trying your example code. Maybe you should also check if you got this error too. And I found some (maybe) source that may solve this problem.

Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?

I finally come up with a solution using AJAX, hope it helps.

var currentLoc = $("#currentLocation");
var tz = $("#timezone");
var url = "";

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    currentLoc.html("Geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  var lat = position.coords.latitude;
  var long = position.coords.longitude;

  currentLoc.html("Latitude: " + lat + "<br>Longitude: " + long);

  url = "https://api.darksky.net/forecast/[API_Key]/" + lat + "," + long;
  getTodaysWeather(url);
}

function getTodaysWeather(url) {
  $.ajax({
     url:url,
     dataType: 'jsonp',
     jsonp: 'callback',
     success:function(json){
       tz.html(json.timezone);
     },
     error:function(){
         //ErrorHandling
     },
});
}

getLocation();