How do I fetch openweather forecast using JS?

See more:

Javascript

I have problems with fetching 5 day weather forecast using fetch function in JavaScript.

What I have tried:

I came up with this code.
Here's JS:

var activities = document.getElementById('activitySelector');
var main = document.querySelector('#name');
var temp = document.querySelector('.temp');
var desc = document.querySelector('.desc');



activities.addEventListener('change', (e) => {
    fetch('https://api.openweathermap.org/data/2.5/forecast?q='+e.target.value+'&appid=<<<<API KEY>>>>&cnt=5')
        .then(response => response.json())
        .then(data => {
            var tempValue = data['main']['temp'];
            var nameValue = data['name'];
            var descValue = data['weather'][0]['description'];

            main.innerHTML = nameValue;
            desc.innerHTML = "Desc - "+descValue;
            temp.innerHTML = "Temp - "+tempValue;

        })

        .catch(err => alert("Wrong city name!"));
})

Here is HTML:

<select name="cities" id="activitySelector">
           <div class="options">
               <option class="option" value="warsaw">Warsaw</option>
               <option class="option" value="phoenix">Phoenix</option>
               <option class="option" value="berlin">Berlin</option>
           </div>
       </select>

           <div class="container">
           <div class="card">
               <h1 class="name" id="name"></h1>
               <p class="temp"></p>
               <p class="clouds"></p>
               <p class="desc"></p>
           </div>
       </div>

It returns catch "Wrong city name!". It should return 5-days weather forecast. Could you please help me out with this?


UPDATE

After changing catch to.catch(err => alert(err)), I get the following message: TypeError: Cannot read property 'temp' of undefined. I suspect that there's something wrong with this piece of code:

var tempValue = data['main']['temp'];
var nameValue = data['name'];
var descValue = data['weather'][0]['description'];

main.innerHTML = nameValue;
desc.innerHTML = "Desc - "+descValue;
temp.innerHTML = "Temp - "+tempValue;

Here's how JSON looks like:

{"cod":"200","message":0,"cnt":5,"list":[{"dt":1618606800,"main":{"temp":279.45,"feels_like":277.97,"temp_min":278.72,"temp_max":279.45,"pressure":1031,"sea_level":1031,"grnd_level":1028,"humidity":56,"temp_kf":0.73},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"clouds":{"all":25},"wind":{"speed":2.06,"deg":80,"gust":6.1},"visibility":10000,"pop":0,"sys":{"pod":"n"},"dt_txt":"2021-04-16 21:00:00"},{"dt":1618617600,"main":{"temp":278.63,"feels_like":277.46,"temp_min":276.98,"temp_max":278.63,"pressure":1031,"sea_level":1031,"grnd_level":1028,"humidity":61,"temp_kf":1.65},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02n"}],"clouds":{"all":23},"wind":{"speed":1.65,"deg":53,"gust":4.49},"visibility":10000,"pop":0,"sys":{"pod":"n"},"dt_txt":"2021-04-17 00:00:00"},{"dt":1618628400,"main":{"temp":276.91,"feels_like":275.48,"temp_min":275.64,"temp_max":276.91,"pressure":1031,"sea_level":1031,"grnd_level":1027,"humidity":66,"temp_kf":1.27},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"clouds":{"all":10},"wind":{"speed":1.65,"deg":21,"gust":4.06},"visibility":10000,"pop":0,"sys":{"pod":"n"},"dt_txt":"2021-04-17 03:00:00"},{"dt":1618639200,"main":{"temp":275.25,"feels_like":273.27,"temp_min":275.25,"temp_max":275.25,"pressure":1031,"sea_level":1031,"grnd_level":1028,"humidity":67,"temp_kf":0},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":{"all":1},"wind":{"speed":1.89,"deg":16,"gust":4.72},"visibility":10000,"pop":0,"sys":{"pod":"d"},"dt_txt":"2021-04-17 06:00:00"},{"dt":1618650000,"main":{"temp":280.37,"feels_like":278.43,"temp_min":280.37,"temp_max":280.37,"pressure":1030,"sea_level":1030,"grnd_level":1027,"humidity":44,"temp_kf":0},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":{"all":2},"wind":{"speed":2.84,"deg":39,"gust":4.51},"visibility":10000,"pop":0,"sys":{"pod":"d"},"dt_txt":"2021-04-17 09:00:00"}],"city":{"id":2643743,"name":"London","coord":{"lat":51.5085,"lon":-0.1257},"country":"GB","population":1000000,"timezone":3600,"sunrise":1618549331,"sunset":1618599475}}

It appears that main is a property in each of the elements of data.list. I can't figure out how to fix this. Simply changing data to data.list doesn't fix my issue