Подключить API с погодой на выбранный город
Подключить API с погодой на выбранный город из выпадающего списка (тег select)
Помогите сделать обработку ответа: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="cont">
<div class="request">
<select id="city" onchange="getWeather();">
<option value="Kharkiv">Kharkiv</option>
<option value="Kiev">Kiev</option>
<option value="Lviv">Lviv</option>
<option value="Odesa">Odesa</option>
</select>
</div>
<div id="weather"></div>
</div>
<script src="js/script.js"></script>
</body>
</html>
JS:
const apiKey = "6cc3148bb3b32c3700a98d81defdd8a7";
function getWeather(){
//1
let request = new XMLHttpRequest();
let city=document.getElementById('city').value;
let URL = "http://api.openweathermap.org/data/2.5/weather?q="+сity+"&appid"+ apiKey;
//2
request.open("GET", URL, true);
//3
request.send();
//4
request.onreadystatechange=function(){
//обработка ответа
}
}
|
Цитата:
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="cont">
<div class="request">
<select id="city">
<option value="Kharkiv">Kharkiv</option>
<option value="Kiev">Kiev</option>
<option value="Lviv">Lviv</option>
<option value="Odesa">Odesa</option>
</select>
</div>
<pre id="weather"></pre>
</div>
<script>
const apiKey = "6cc3148bb3b32c3700a98d81defdd8a7";
const container = document.querySelector('#weather');
document.querySelector('#city').addEventListener('change', function () {
const selectedCity = this.value;
const requestGetParams = `q=${encodeURIComponent(selectedCity)}&appid=${apiKey}`;
const requestUrl = `https://api.openweathermap.org/data/2.5/weather?${requestGetParams}`;
fetch(requestUrl).then(
res => res.json()
).then(response => {
container.innerHTML = JSON.stringify(response, null, 4);
});
});
document.querySelector('#city').dispatchEvent(new Event('change'));
</script>
</body>
</html>
|
Nexus,
То что нужно, а чтоб вывести только температуры и описание, что нужно?Вот так?
if(request.readyState == 4){
let info = JSON.parse(request.responseText);
el.innerHTML += "<p><b>main:</b>" + info['main']+"</p>";
el.innerHTML += "<p><b>description:</b>" + info['description']+"</p>";
|
Rudman, попробуйте - узнаете.
В моем коде объект с данными - response (строка 32). Структура объекта видна на странице. Свойство «description» есть только у свойства «weather», получить его можно так: response.weather[0].description Температура в Кельвинах лежит тут: response.main.temp Отображение температуры и описания в градусах Цельсия:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="cont">
<div class="request">
<select id="city">
<option value="Kharkiv">Kharkiv</option>
<option value="Kiev">Kiev</option>
<option value="Lviv">Lviv</option>
<option value="Odesa">Odesa</option>
</select>
</div>
<div id="weather"></div>
</div>
<script>
const apiKey = "6cc3148bb3b32c3700a98d81defdd8a7";
const container = document.querySelector('#weather');
document.querySelector('#city').addEventListener('change', function () {
const selectedCity = this.value;
const requestGetParams = `q=${encodeURIComponent(selectedCity)}&units=metric&appid=${apiKey}`;
const requestUrl = `https://api.openweathermap.org/data/2.5/weather?${requestGetParams}`;
fetch(requestUrl).then(
res => res.json()
).then(response => {
const weatherDescriptions = response.weather.map(item => item.description);
container.innerHTML = `<div><b>Main</b>: ${response.main.temp}</div>`
+ `<div><b>Description</b>: ${weatherDescriptions.join(', ')}</div>`;
});
});
document.querySelector('#city').dispatchEvent(new Event('change'));
</script>
</body>
</html>
|
Nexus, cпасибо, вы мне очень помогли
|
| Часовой пояс GMT +3, время: 09:09. |