I want to fetch a 5 day weather forecast in JavaScript.
When I execute the code below, I get:
TypeError: Cannot read property 'temp' of undefined
If I change https://api.openweathermap.org/data/2.5/forecast?q= to:
https://api.openweathermap.org/data/2.5/weather?q=I get current weather without error.
Why forecast doesn't work in my case? Am I missing something?
JavaScript (I suppose that there is a problem in .then(data => snippet):
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=<<<<APIKEY>>>>&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(err));
})
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>
JSON that I'm trying to fetch:
{"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}}
The problem is simply the way you're dereferencing the values you want.
data has a property list. list is an array of objects, each of which has a main key, and that key points to an object with a temp key.
For example, you can grab all the elements and log their main.temp fields like this:
const data = {
"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
}
}
for (const day of data.list){
console.log(`Temp: ${day.main.temp}`)
}