Блог

Главная - Вопросы по программированию - Почему я не могу визуализировать элементы этих объектов? Получаю эту ошибку `Ошибка типа: Не удается прочитать свойство ‘temp’ неопределенного`

Почему я не могу визуализировать элементы этих объектов? Получаю эту ошибку `Ошибка типа: Не удается прочитать свойство ‘temp’ неопределенного`

#javascript

Вопрос:

Я пытаюсь создать приложение погоды, но значения не отображаются. Я попытался использовать forEach для перебора всех значений и отображения их в виде функции книги. Но это не работает.

Код JS:

 document.getElementById('form-input').addEventListener("submit", (e) => {
    e.preventDefault();
    var cityId = document.getElementById("city-weather").value;
    getWeather(cityId);
  })

async function getWeather(cityId) {
  try {
    let response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityId}amp;appid=7d93c09c5bd7fccd41b0f335e310a15b`)
    let user = await response.json()
    console.log(user)
    let render = await renderBooks(user)
  } catch(e) {
    console.log(e)
  }
}

function renderBooks(user) {
  const main = document.querySelector('main')
  Object.values(user).forEach(book => {
    const h2 = document.createElement('h2')
    h2.innerHTML = `<h2>${book.main.temp}</h2>`
    main.appendChild(h2)
  })
}

HTML-код:

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <form id="form-input">
        <input id="city-weather"/>
        <button type="button" name="button">Search</button>
    </form>
    <div id="main">
      
    </div>
  </body>
<script type="text/javascript" src="./script.js"></script>
</html>

Я получаю следующую ошибку:

 TypeError: Cannot read property 'temp' of undefined

Комментарии:

1. Проверьте/зарегистрируйте book объект в цикле. Он не содержит main в качестве члена, таким образом, возвращается undefined . Доступ main.temp выдает эту ошибку.

2. В вашей forEach функции что такое book и почему вы ожидаете, что у нее будет называемое свойство main (которого, по крайней мере, у одного из них нет).

3. Вам это не нужно await renderBooks , это синхронная функция. Также написание let render = также бесполезно, потому renderBooks что ничего не возвращает, поэтому render всегда будет неопределенным.

Ответ №1:

Основываясь на API, я попробовал это — https://api.openweathermap.org/data/2.5/weather?q=Лондон и приложение=7d93c09c5bd7fcccd41b0f335e310a15b

И если вы видите ответ, вам не нужно зацикливаться на ответе, чтобы добраться до main него, так как там только 1 main .

Ваша renderBook функция может быть просто —

 function renderBooks(user) {
  const main = document.querySelector('main')
  const h2 = document.createElement('h2')
  h2.innerHTML = `<h2>${user.main.temp}</h2>`
  main.appendChild(h2)
}

Ответ —

         {
        "coord": {
            "lon": -0.1257,
            "lat": 51.5085
        },
        "weather": [
            {
                "id": 803,
                "main": "Clouds",
                "description": "broken clouds",
                "icon": "04d"
            }
        ],
        "base": "stations",
        "main": {
            "temp": 300.48,
            "feels_like": 301.18,
            "temp_min": 298.4,
            "temp_max": 302.18,
            "pressure": 1012,
            "humidity": 54
        },
        "visibility": 10000,
        "wind": {
            "speed": 0.45,
            "deg": 303,
            "gust": 2.24
        },
        "clouds": {
            "all": 75
        },
        "dt": 1623849508,
        "sys": {
            "type": 2,
            "id": 2019646,
            "country": "GB",
            "sunrise": 1623814962,
            "sunset": 1623874789
        },
        "timezone": 3600,
        "id": 2643743,
        "name": "London",
        "cod": 200
    }

Комментарии:

1. Я использовал это решение, и оно сработало! Но я не особенно понимаю причину, по которой я не должен использовать forEach для перебора всех массивов. Когда следует использовать метод forEach для получения значений массива?

Метки: