Попытка получить API в JavaScript - PullRequest
0 голосов
/ 13 декабря 2018

Я работаю с OpenWeatherMap API и не могу понять, почему одно из моих полей отображается неопределенным.Все работает, за исключением случаев, когда я пытаюсь получить информацию о погоде, которая находится по адресу weather.description, она возвращает неопределенное значение.Все остальные переменные заполняются нормально.Кто-нибудь знает, что может помешать этому работать правильно?Мой JavaScript:

var request = new XMLHttpRequest();



function getWeather() {
    var latitude = document.getElementById("lat").value;
    var longitude = document.getElementById("long").value;
    request.open('GET', 'https://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=imperial&appid=547fa6dfa44cff13fa92bba2c465b366', true); 
    request.send();
    request.onreadystatechange = displayData;
}


function displayData() {
    if(request.readyState === 4 && request.status === 200) {
       var resultData = JSON.parse(request.responseText);
       var location = document.getElementById("location")
       var temperature = document.getElementById("temperature");
       var windspeed = document.getElementById("windspeed");
       var condition = document.getElementById("condition");
       location.value = resultData.name +", " + resultData.sys.country;
       temperature.value = resultData.main.temp + " degrees Fahrenheit";
       windspeed.value = resultData.wind.speed + " miles per hour";
       condition.value = resultData.weather.description;
       document.getElementById("resultset").style.visibility = "visible";
    }
 }

 // Create an event handler for when the btn button is clicked
 window.onload = function() {
     var btn = document.getElementById("btn");
     btn.addEventListener("click", getWeather, false);
}

Мой HTML

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta id="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
   <header>
      <h1>Weather Report</h1>
   </header>

   <article>
      <h2>Weather Data</h2>

<table style="width:100%">
  <tr>
    <th><strong>City</strong></th>
    <th><strong>Coordinates</strong></th> 
  </tr>
  <tr>
    <td>Batavia, OH, US</td>
    <td>Latitude: 39.07859<br>
        Longitude: -84.17941</td>
  </tr>
  <tr>
    <td>Cincinnati, OH, US</td>
    <td>Latitude: 39.10713<br>
        Longitude: -84.50413</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

        <form action="#" method="post" id="theForm" novalidate>
         <fieldset id="coordinateset">
            <label for="lat" id="latlabel">Latitude:</label>
            <input id="lat" type="number" />
            <label for="long" id="longlabel">Longitude:</label>
            <input id="long" type="number" />
         </fieldset><br><br>
         <fieldset id="resultset">
            <label for="location" id="locationlabel">Location:</label>
            <input id="location" type="text" readonly />
            <label for="temperature" id="temperaturelabel">Temperature:</label>
            <input id="temperature" type="text" readonly />
            <label for="windspeed" id="windspeedlabel">Wind Speed:</label>
            <input id="windspeed" type="text" readonly />
            <label for="condition" id="conditionlabel">Weather Condition:</label>
            <input id="condition" type="text" readonly />
         </fieldset>
         </form>
        <button id="btn">Submit Coordinates</button>
   </article>
   <script src="js/weather_report1.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 13 декабря 2018

Если вы видите API на сайте OpenWeatherMap , мы видим, что свойство weather является массивом.Чтобы получить доступ к описанию погоды, попробуйте weather[0].description или, что еще лучше, пройдитесь по нему и извлеките описание каждого погодного условия, если оно подходит для вашего случая использования.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...