I'm trying to get a single index of daysArray to concatonate with temperature.
Presently building a weather app and am trying to return an with the day of the week and the temperature. Right now it is returning the entire week and the temperature at the end. e.g ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "31.29"]
["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "34.21"]
What I'm looking to have appear is ["Friday","31.29"], ["Saturday","34.21"]
I want to have then display in the li tags I've created below.
This is my code:
const responseOne = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude={current,minutely,hourly,alerts}&units=metric&appid=${apiKey}`)
const dataOne = await responseOne.json()
dataOne.daily.forEach(day => {
function daysForLocale(localeName = 'en', weekday = 'long') {
const format = new Intl.DateTimeFormat(localeName, { weekday }).format;
const today = new Date();
const daysArray = [...Array(8).keys()]
.map((val, index) => format(new Date(today.getTime() + 3600 * 24 * 1000 * (index))));
console.log(daysArray)
const temperature = JSON.stringify(day.temp.day)
console.log(daysArray)
const totDayTemp = daysArray.concat(temperature)
console.log(totDayTemp)
return daysArray;
}
let tempDay = document.createElement('li')
tempDay.innerText = `Daily Temperature: ${daysForLocale()} `
tempDay.className = 'day'
console.log(tempDay)
return tempDay;
})
Does anybody have an idea how I can get my desired output?
Response I'm getting is:
(8)[Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
app.js:31 (8) ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
app.js:33 (9) ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "30.04"]
app.js:39 <li class="day">…</li>
app.js:29 (8) ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
app.js:31 (8) ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
app.js:33 (9) ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "25.83"]
app.js:39 <li class="day">…</li>
app.js:29 (8) ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
app.js:31 (8) ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
app.js:33 (9) ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "26.72"]
JSON:
{
"lat": 48.8534,
"lon": 2.3488,
"timezone": "Europe/Paris",
"timezone_offset": 7200,
"current": {
"dt": 1629464870,
"sunrise": 1629435036,
"sunset": 1629485863,
"temp": 23.23,
"feels_like": 23.1,
"pressure": 1017,
"humidity": 57,
"dew_point": 14.25,
"uvi": 5.63,
"clouds": 90,
"visibility": 10000,
"wind_speed": 2.06,
"wind_deg": 0,
"weather": [
{
"id": 804,
"main": "Clouds",
"description": "overcast clouds",
"icon": "04d"
}
]
},
"daily": [
{
"dt": 1629457200,
"sunrise": 1629435036,
"sunset": 1629485863,
"moonrise": 1629484020,
"moonset": 1629423780,
"moon_phase": 0.43,
"temp": {
"day": 23.45,
"min": 17.1,
"max": 25.7,
"night": 22.08,
"eve": 25.7,
"morn": 17.1
},
"feels_like": {
"day": 23.23,
"night": 21.75,
"eve": 25.4,
"morn": 16.75
},
"pressure": 1017,
"humidity": 53,
"dew_point": 13.33,
"wind_speed": 2.65,
"wind_deg": 57,
"wind_gust": 5.74,
"weather": [
{
"id": 804,
"main": "Clouds",
"description": "overcast clouds",
"icon": "04d"
}
],
"clouds": 90,
"pop": 0.03,
"uvi": 5.69
},
{
"dt": 1629543600,
"sunrise": 1629521521,
"sunset": 1629572149,
"moonrise": 1629572460,
"moonset": 1629514740,
"moon_phase": 0.46,
"temp": {
"day": 27.68,
"min": 17.87,
"max": 29.75,
"night": 20.16,
"eve": 24.18,
"morn": 17.87
},
"feels_like": {
"day": 27.46,
"night": 20.09,
"eve": 23.93,
"morn": 17.57
},
"pressure": 1015,
"humidity": 41,
"dew_point": 13.21,
"wind_speed": 6.08,
"wind_deg": 253,
"wind_gust": 8.33,
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04d"
}
],
"clouds": 64,
"pop": 0.04,
"uvi": 5.7
},
{
"dt": 1629630000,
"sunrise": 1629608007,
"sunset": 1629658434,
"moonrise": 1629660420,
"moonset": 1629605880,
"moon_phase": 0.5,
"temp": {
"day": 22.32,
"min": 16.19,
"max": 23.79,
"night": 18.41,
"eve": 22.25,
"morn": 16.68
},
"feels_like": {
"day": 21.83,
"night": 18.08,
"eve": 21.81,
"morn": 16.6
},
"pressure": 1020,
"humidity": 47,
"dew_point": 10.33,
"wind_speed": 4.56,
"wind_deg": 286,
"wind_gust": 8.02,
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10d"
}
],
"clouds": 6,
"pop": 0.88,
"rain": 1.2,
"uvi": 4.71
},
{
"dt": 1629716400,
"sunrise": 1629694492,
"sunset": 1629744719,
"moonrise": 1629748080,
"moonset": 1629696960,
"moon_phase": 0.53,
"temp": {
"day": 20.08,
"min": 15.69,
"max": 23.49,
"night": 18.4,
"eve": 20.66,
"morn": 15.79
},
"feels_like": {
"day": 20,
"night": 18.33,
"eve": 20.58,
"morn": 15.75
},
"pressure": 1021,
"humidity": 71,
"dew_point": 14.42,
"wind_speed": 4.15,
"wind_deg": 40,
"wind_gust": 9.46,
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10d"
}
],
"clouds": 100,
"pop": 0.6,
"rain": 1.19,
"uvi": 4.54
},
{
"dt": 1629802800,
"sunrise": 1629780977,
"sunset": 1629831002,
"moonrise": 1629835560,
"moonset": 1629787800,
"moon_phase": 0.57,
"temp": {
"day": 20.92,
"min": 14.77,
"max": 21.51,
"night": 17.83,
"eve": 20.26,
"morn": 14.77
},
"feels_like": {
"day": 20.45,
"night": 17.42,
"eve": 19.88,
"morn": 14.42
},
"pressure": 1023,
"humidity": 53,
"dew_point": 10.72,
"wind_speed": 6.01,
"wind_deg": 59,
"wind_gust": 10.74,
"weather": [
{
"id": 802,
"main": "Clouds",
"description": "scattered clouds",
"icon": "03d"
}
],
"clouds": 44,
"pop": 0,
"uvi": 3.37
},
{
"dt": 1629889200,
"sunrise": 1629867462,
"sunset": 1629917285,
"moonrise": 1629922920,
"moonset": 1629878520,
"moon_phase": 0.6,
"temp": {
"day": 22.48,
"min": 14.08,
"max": 23.49,
"night": 17.61,
"eve": 21.16,
"morn": 14.08
},
"feels_like": {
"day": 21.75,
"night": 16.86,
"eve": 20.4,
"morn": 13.21
},
"pressure": 1020,
"humidity": 37,
"dew_point": 7.04,
"wind_speed": 6.93,
"wind_deg": 61,
"wind_gust": 12.44,
"weather": [
{
"id": 800,
"main": "Clear",
"description": "clear sky",
"icon": "01d"
}
],
"clouds": 1,
"pop": 0,
"uvi": 4
},
{
"dt": 1629975600,
"sunrise": 1629953948,
"sunset": 1630003566,
"moonrise": 1630010340,
"moonset": 1629969060,
"moon_phase": 0.63,
"temp": {
"day": 24.18,
"min": 13.56,
"max": 25.74,
"night": 17.97,
"eve": 23.21,
"morn": 13.56
},
"feels_like": {
"day": 23.59,
"night": 17.31,
"eve": 23.02,
"morn": 12.69
},
"pressure": 1019,
"humidity": 36,
"dew_point": 8.14,
"wind_speed": 4.96,
"wind_deg": 16,
"wind_gust": 10.09,
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04d"
}
],
"clouds": 55,
"pop": 0,
"uvi": 4
},
{
"dt": 1630062000,
"sunrise": 1630040433,
"sunset": 1630089847,
"moonrise": 1630097820,
"moonset": 1630059540,
"moon_phase": 0.66,
"temp": {
"day": 24.02,
"min": 14.63,
"max": 24.72,
"night": 18.37,
"eve": 21.89,
"morn": 14.87
},
"feels_like": {
"day": 23.39,
"night": 17.75,
"eve": 21.23,
"morn": 14.68
},
"pressure": 1021,
"humidity": 35,
"dew_point": 7.69,
"wind_speed": 5.48,
"wind_deg": 61,
"wind_gust": 9.09,
"weather": [
{
"id": 800,
"main": "Clear",
"description": "clear sky",
"icon": "01d"
}
],
"clouds": 1,
"pop": 0,
"uvi": 4
}
]
}
Some issues:
Your code is looping over the daily array (having 8 entries) with forEach, but then you do a nested iteration with again 8 iterations, using Array(8).keys(). There is no need for a nested loop. You just need 8 results, not 8 * 8 results.
The response has a dt member, which represents the date for which the weather conditions are given. So there is no need to fiddle around with today.getTime(). Just feed dt*1000 to the Date constructor.
You create tempDay, but then throw it away. Returning it in a forEach callback is useless, as forEach ignores any returned values.
The daysForLocale would be better positioned outside the loop, provided you would pass it the arguments it needs.
Anyway I excluded the code that you use to create HTML elements, as I think it is not related to your question.
Here is code to generate the pairs of weekday and temperature:
const dataOne = {
"daily": [
{"dt": 1629457200,"temp": {"day": 23.45}},
{"dt": 1629543600,"temp": {"day": 27.68}},
{"dt": 1629630000,"temp": {"day": 22.32}},
{"dt": 1629716400,"temp": {"day": 20.08}},
{"dt": 1629802800,"temp": {"day": 20.92}},
{"dt": 1629889200,"temp": {"day": 22.48}},
{"dt": 1629975600,"temp": {"day": 24.18}},
{"dt": 1630062000,"temp": {"day": 24.02}}
]
};
const format = new Intl.DateTimeFormat('en', { weekday: 'long' }).format;
const result = dataOne.daily.map(({dt, temp}) => [format(new Date(dt*1000)), temp.day]);
console.log(result);