【发布时间】：2017-12-29 19:44:04
【问题描述】：
//app.js
const SEARCH_VIEW = document.getElementById('search_view');
const RESULTS_VIEW = document.getElementById('results_view');
const FORECAST_VIEW = document.getElementById('forecast_view')
function loadCities(){
const cities = ["London", "Paris", "Madrid", "Lisbon","Ohrid"];
var options = null;
var dest = document.getElementById('dest');
//Looping the cities
cities.forEach(city => {
options += '<option>' + city +'</options>';
});
dest.innerHTML = options;
}
function gettingWeather(){
// 1. Open the Url
var dest = document.getElementById('dest').value;
var url = ('http://api.openweathermap.org/data/2.5/weather?q='+ dest + '&appid=exampleAppId');
console.log(url);
console.log(dest);
// 2. Fetch the URL
fetch(url)
.then(response => {
if(response.status !== 200){
console.error("API failed, Status Code " + response.status);
return;
}
console.log(response);
// 3.We make the response .json and open the data
response.json().then(data => {
console.log(data);
RESULTS_VIEW.style.visibility = 'visible';
// Temperature
document.getElementById('Temperature').textContent = data.main.temp;
//Wind
document.querySelector('.Wind').textContent = data.wind.speed * data.wind.deg;
//Description
document.querySelector('.Description').textContent = data.weather[0].description;
});
}).catch(err => {
console.error("Fetch error "+ err);
});
}
function forecast(){
const API_BASE = 'http://api.openweathermap.org/data/2.5/forecast?mode=json&';
const API_KEY = 'appid=exampleAppId&';
var dest = document.getElementById('dest').value;
var url = API_BASE + API_KEY + 'q=' + dest.value;
console.log(url);
console.log(dest.value);
// 2. Fetch the URL
fetch(url)
.then(response => {
if(response.status !== 200){
console.error("API failed, Status Code " + response.status);
return;
}
console.log(response);
// 3.We make the response .json and open the data
response.json().then(data => {
console.log(data);
RESULTS_VIEW.style.visibility = 'hidden';
FORECAST_VIEW.style.visibility= 'visible';
});
}).catch(err => {
console.error("Fetch error "+ err);
});
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width ,initial-scale=1">
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body onload="loadCities();">
<div class="container">
<div id = "results_view">
<div class="inputWrapper">
<h1> Weather App </h1>
<p>Choose a city.</p>
<select id="dest" onchange="gettingWeather();" width=150 style="width:150px" ></select><br>
<label>Temperature</label>
<label class="Temperature" id="Temperature"></label><br>
<label>Wind</label>
<label class="Wind" id="Wind"></label><br>
<label>Description</label>
<h1 class="Description" id="Description"></h1>
<button onclick="forecast();">Forecast</button>
</div><!-- InputWrapper -->
</div>
<div id="forecast_view">
<h1>ForeCast</h1>
</div>
</div> <!-- end container -->
<script src="app.js"></script>
</body>
</html>
我的任务是随机选择 5 个欧洲城市并显示一些属性，但是当单击按钮时，我需要显示该城市的预测。我尝试使用词法范围来和我的应用程序的一半工作在我显示从 API 获取的一些属性的简单部分，当我单击按钮 forecast 我有错误响应错误但错误是也是我选择的城市。如果我使用任何城市，预测中是未定义的。我不确定为什么会出现此错误，并且我没有尝试过任何内部操作closure如果您不知道任何答案，我将不胜感激，即使是对类似工作的见解或参考。
谢谢
【问题讨论】：
标签： javascript api forecasting weather-api