Форум

Rudman · #1 (**permalink**) 14.04.2020, 17:04

Подключить 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(){
        //обработка ответа 
    }
}

рони · #2 (**permalink**) 14.04.2020, 18:09

Сообщение от Rudman

let URL = "http://api.openweathermap.org/data/2.5/weather?q="+сity+"&appid"+ apiKey;

Nexus · #3 (**permalink**) 14.04.2020, 18:15

<!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>

Rudman · #4 (**permalink**) 14.04.2020, 21:23

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>";

Nexus · #5 (**permalink**) 15.04.2020, 11:12

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>

Rudman · #6 (**permalink**) 15.04.2020, 17:28

Nexus, cпасибо, вы мне очень помогли

Форум

Справочник

Discord чат

Курсы javascript