Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.04.2020, 17:04
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

Подключить 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(){
        //обработка ответа 
    }
}
Ответить с цитированием
  #2 (permalink)  
Старый 14.04.2020, 18:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,807

Сообщение от Rudman
let URL = "http://api.openweathermap.org/data/2.5/weather?q="+сity+"&appid"+ apiKey;
Ответить с цитированием
  #3 (permalink)  
Старый 14.04.2020, 18:15
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,200

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 14.04.2020, 21:23
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

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>";
Ответить с цитированием
  #5 (permalink)  
Старый 15.04.2020, 11:12
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,200

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, 15.04.2020 в 11:16.
Ответить с цитированием
  #6 (permalink)  
Старый 15.04.2020, 17:28
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
google map API bravoo Элементы интерфейса 1 05.11.2018 00:24
backend API Key olimpset Серверные языки и технологии 9 11.08.2018 00:26
MVC vs API. Ваше мнение. B~Vladi Общие вопросы Javascript 58 19.10.2010 15:29