Menu
I'm having some trouble creating a complete application using an API, specifically the Forecast.io weather api. For simplicity, I've put my JS directly in my HTML page. For this basic version, I would be happy just to have this show something. Let's say I wanted current temperature (currently -> temperature). Also, I'm not sure if "?callback?" is always recommended for all RESTful APIs.
<!DOCTYPE html>
<html>
<body>
<p id="weather">Here's the weather:<p>
<button onclick="b()">Submit</button>
<script>
function b(){
var apiKey = '<private>';
var url = 'https://api.forecast.io/forecast/';
var lati = 0;
var longi = 0;
var data;
$.getJSON(url + apiKey + "/" + lati + "," + longi + "?callback=?", function(data) {
$('#weather').innerHTML('and the weather is: ' + data[4].temperature);
});
}
</script>
</body>
</html>
970
The main mistake you made is not including jQuery :-) The next one is that on a jQuery object you need to use the html() function instead of the JavaScript native innerHTML property.
If you use console.log(data) you can see all the properties of the returned object, so you can reference it correctly like data.currently.temperature
<!DOCTYPE html>
<html>
<body>
<p id="weather">Here's the weather:<p>
<button onclick="b()">Submit</button>
<script>
function b(){
var apiKey = '<PRIVATE>';
var url = 'https://api.forecast.io/forecast/';
var lati = 0;
var longi = 0;
var data;
$.getJSON(url + apiKey + "/" + lati + "," + longi + "?callback=?", function(data) {
//console.log(data);
$('#weather').html('and the temperature is: ' + data.currently.temperature);
});
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
