javascript retrieving json Darksky.com API data weather

Question

I'm trying to retrieve JSON data, a weather data from Darksky.com's API before that I successfully retrieved my latitude and longitude from freegoip.com API.

However Darksky API requires both longitude and latitude before responding the desired weather data. the issue here is I cant retrieve the JSON data (temperature, current weather status) from Darksky after providing the required data even though I followed the same instructions for retrieving the first. Any ideas would be much appreciable here is my code snippets:

$( document ).ready(function() {
   
    var darkSkyKey = "c565381ee9bf05151d254ffa7ca96313"; 
    var regionLink = "http://freegeoip.net/json/";
    
$.getJSON(regionLink, function(data) {
    var country_code = data.country_code;
    var country = data.country_name;
    var ip = data.ip;
    var time_zone = data.time_zone;
    var latitude = data.latitude;
    var longitude = data.longitude;
    });

$.get(regionLink, function (response) {
    $("#location").html("Location: " + response.city + ", " + response.region_name+". Latitude: "+response.latitude+", Longtitude: "+response.longitude);
    }, "jsonp");
  
    var weatherLink = "https://api.darksky.net/forecast/c565381ee9bf05151d254ffa7ca96313/"+latitude+","+longitude+".json";
    
$.getJSON(weatherLink, function(data2) {
    var timezone = data2.timezone;
    var temperature = currently.temperature;
    var status = data2.summary;
    });
    
$.get(weatherLink, function (response2) {
    $("#temp").html("Temprature now is: "+ response2.temperature);
    $("#weather").html("Weather Status: "+ response2.status);
}, "jsonp");
    
     
});

body{
    background-color: black;
    
}

.motto{
    margin-top: -21px;
    font-family: 'Kaushan Script', cursive;
    color:orange;
    text-align: center;
    font-size: 53px;
}

.topline{
    display: block;
    margin: auto;
}

.middleline{
    margin-top: -29px;
    height: 260px;
    align-items: center;
}

.weatherimage{
    background-color:currentColor;
    border-radius: 113px;
    border: 2px solid orange;
    position: relative;
    height: 262px;
    display: block;
    margin: auto;
    width: 40%;
    animation-name: pulse;
    animation-iteration-count: infinite;

}

.imgPartlycloudy{
    height: 250px;
    margin-left: 35%;
    position: absolute;
}

.imgRain{
    height: 250px;
    margin-left: 35%;
    position: absolute;
    display: none;
}

.imgCloudy{
    height: 250px;
    margin-left: 35%;
    position: absolute;
    display: none;
}
.imgSunny{
    height: 250px;
    margin-left: 35%;
    position: absolute;
    display: none;
}

.lastline{
    height: 222px;
}

.city{
    color:orange;
    font-size: 22px;
    font-family: 'Kaushan Script', cursive;
}
.temprature{
    color: orange;
    font-size: 22px;
    font-family: 'Kaushan Script', cursive;
}
.status{
    color: orange;
    font-size: 22px;
    font-family: 'Kaushan Script', cursive;
}

.elements{
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="weatherTodayStyle.css">
    <script type="text/javascript" src="weatherTodayFunctions.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    </head>
<body>
    
    <div class="topline">
    <h2 class="motto"> Welcome to the Weather App</h2>
    <h3> </h3>
    </div>    
    
    <div class="middleline">
    <div class="weatherimage animated">
        <img alt="weather image" class="imgPartlycloudy" src="https://icons.wxug.com/i/c/v4/partlycloudy.svg">
        <img alt="weather image" class="imgRain" src="https://icons.wxug.com/i/c/v4/rain.svg">
        <img alt="weather image" class="imgCloudy" src="https://icons.wxug.com/i/c/v4/cloudy.svg">
        <img alt="weather image" class="imgSunny" src="https://icons.wxug.com/i/c/v4/sunny.svg">
        </div>
    
    </div>
        
    <div class="lastline">
    <div class="elements">
        <h5 class="status" id="weather"> Weather Status</h5>
        <h5 class="city" id="location">City </h5>
        <h5 class="temprature" id="temp">Temprature</h5>
        </div>
    
    </div>
    
    <a href="https://darksky.net/poweredby/">Powered by Dark Sky</a>

    </body>

</html>

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

Your issue is that the darksky site will not allow Cross Domain requests.

This code works as I am using a proxy service to serve the result

getLocation()
            .then(function (data) {

                var url ='https://crossorigin.me/https://api.darksky.net/forecast/c565381ee9bf05151d254ffa7ca96313/' + data.latitude + ',' + data.longitude;
                getDarkSky(url)
                    .then(function (res) {
                        console.log(res)
                    }).catch(function (err) {
                    console.log(err)
                })
            });


        function getLocation() {
            return $.getJSON(rl).done()
        }

        function getDarkSky(url) {

            return $.getJSON(url).done()
        }

See this SA post for a full resolution "No 'Access-Control-Allow-Origin' header is present on the requested resource"

edited May 23 '17 at 10:31

Community

1
1

answered May 06 '17 at 22:33

dave

1,410
1
16
42

could you please specify more details about the last two functions i treid to but implent the data into my htm but i still couldnt retrive the data yet from the API – OT AMD May 07 '17 at 16:18
The simply call the requested urls and signify data retrieval is complete using .done(). This allows you to wait for the result in your main function by using callfunction().then(function (datafromfunction) {}); – dave May 07 '17 at 16:31
im sorry this seems a bit tricky for me .... so where should i implement my code ( $("#temp").html("Temprature now is: "+ response2.temperature); ) to display it on my page ? – OT AMD May 07 '17 at 18:30
replace console.log(res) with your code, res.variable will contain the return from darksky – dave May 07 '17 at 19:02

javascript retrieving json Darksky.com API data weather

1 Answers1