Mike Jandreau
Mike Jandreau

Reputation: 432

How to return historical data from Dark Sky API Time Machine

I'm trying to build a web application that can compare current weather conditions with those of a previous date using the Dark Sky API. My end goal would be to be able to select a date, click the "Get Data" button, and view the following results:

Current Weather           Weather on Chosen Date     Difference 
- today's temperature     - previous temp            - x degrees warmer/cooler
- today's humidity        - previous humidity        - x percent more/less humid
- etc                     - etc                      - etc

I have an example work in progress on CodePen: https://codepen.io/mikejandreau/pen/ExjxQGE

The apiKey is currently exposed - it will be changed and obscured in production.

In the example, the top section has the user location using geolocation data and the current date/time. The "Current" panel successfully shows current weather conditions, and the Fahrenheit/Celsius toggle works.

This is a truncated version of the call to Dark Sky, with just the Time Machine line (full version on CodePen example):

// Retrieve location and data from JSON on load.
$(window).on("load", function () {
    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(function(position) {

            // geologation for weather data
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;

            $.getJSON("https://api.darksky.net/forecast/"+apiKey+"/"+lat+","+lon+","+previousDate+"?exclude=currently,flags", getHistoricalData);

        });
    } else {
        alert("Browser doesn't support geolocation!");
    }
});

The previousDate variable is using a UNIX time stamp that is currently declared above (window).on("load", function(). Conceptually, I think the process that needs to happen is the date gets selected and the button is clicked, the date is converted to a UNIX time stamp, said time stamp is appended to the getJSON call. This is where I'm stuck, since the historical data doesn't seem to be working.

This should update the text based on the JSON data (line 180 on CodePen example):

// HTML data display from JSON.
var getHistoricalData = function(dataHist) {
    console.log(dataHist);
    $("#past_date").text(formattedTime);
    $("#past_summary").text(dataHist.hourly.data.summary);
    $("#past_degree").html(tempConvert(dataHist.hourly.data.temperature));
    $("#past_humidity").html(Math.round(dataHist.hourly.data.humidity * 100));
    $("#past_precip").html(Math.round(dataHist.daily.data[0].precipProbability * 100));
    $("#past_wind-speed").html(Math.round(dataHist.hourly.data.windSpeed * 1.6));
};

The Dark Sky documentation has zero working examples that I can reverse engineer, and while there are functioning demos of the API, I have not yet found a functioning example of the Time Machine functionality.

Not sure what I'm missing, but any pointers would be appreciated.

Upvotes: 1

Views: 485

Answers (0)

Related Questions