When I run my html file,I am not able to fetch temperature from openweather.com
This is my html file:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Lab: APIs</title>
</head>
<body>
<h1>Retrieving JSON Data from an API</h1>
<h2 id="location"></h2>
<div id="temperature"></div>
<div id="conditions"></div>
<div id="icon"></div>
</div>
<script src="LAB-11-APIs-22.js"></script>
> this is my javascript file
</body>
</html>
This is my javascript file:-
function FetchAPI(city) {
let key = '[my_api_key]';
This is my api key
let temp ="Celcius";
var URL="http://api.openweathermap.org/data/2.5/weather?q=Toronto,On,Ca&appid=[my_api_key]";
the URL I am using to fetch the weather.
let http = new XMLHttpRequest();
xhr.responseType = 'json';
http.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
let json = JSON.parse(this.response);
// ** EXTRACTING VALUES FROM JSON DATA SET **
Give value to city's name
document.getElementById('location').innerHTML = json.name;
Display weather icon
document.getElementById('icon').src = "http://openweathermap.org/img/w/" + json.weather[0].icon + ".png"; // STRING CONCATENATION
Give value to temperature
document.getElementById('temperature').innerHTML = Math.round(json.main.temp);
Give value to conditions
document.getElementById('conditions').innerHTML = json.weather[0].description;
} else {
}
}
http.open("GET", URL, true);
http.send();
}
Call the function. For example,
<script src="LAB-11-APIs-22.js"></script>
<script>FetchAPI('Toronto')</script>
Your first script only defines a function but you never invoked it after.