function getResults(query) { fetch(`${api.base}weather?q=${query}&units=metric&appid=${api.key}`) .then(weather => { return weather.json(); }).then(displayResults); } function displayResults(weather) { let city = document.querySelector('.location .city'); city.innerText = `${weather.name}, ${weather.sys.country}`; let now = new Date(); let date = document.querySelector('.location .date'); date.innerText = dateBuilder(now); let temp = document.querySelector('.current .temptater'); temp.innerHTML = `${Math.round(weather.main.temp)}<span>°c</span>`; let weatherType = document.querySelector('.current .weather'); weatherType.innerText = weather.weather[0].main; let hilow = document.querySelector('.hi-low'); hilow.innerText = `${Math.round(weather.main.temp_min)}°c / ${Math.round(weather.main.temp_max)}°c`; }

Cuando estoy accediendo a un objeto anidado en la matriz, esto se muestra

TypeError no capturado (en promesa): no se pueden establecer propiedades de nulo (configurando 'innerText')

Esto sucede solo con

 let weatherType = document.querySelector('.current .weather'); weatherType.innerText = weather.weather[0].main;

Este es un archivo JSON de llamada API

 { "coord": { "lon": -0.1257, "lat": 51.5085 }, "weather": [ { "id": 804, "main": "Clouds", "description": "overcast clouds", "icon": "04d" } ], "base": "stations", "main": { "temp": 10.96, "feels_like": 10.2, "temp_min": 9.65, "temp_max": 11.98, "pressure": 1039, "humidity": 80 }, "visibility": 10000, "wind": { "speed": 1.54, "deg": 340 }, "clouds": { "all": 90 }, "dt": 1639651705, "sys": { "type": 2, "id": 2019646, "country": "GB", "sunrise": 1639641643, "sunset": 1639669905 }, "timezone": 0, "id": 2643743, "name": "London", "cod": 200 }

Todo lo demás está funcionando bien, pero no sé por qué está pasando esto. ¿Alguna solución?