获取对象中的单个索引，以便与API调用连接

Question

我正在尝试获得daysArray的单个索引以与温度相连接。

目前建立一个天气应用程序，我试图返回一周的一天和温度。现在是整个星期的温度和周末的温度。如["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "31.29"]["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "34.21"]

我希望出现的是["Friday","31.29"], ["Saturday","34.21"]

我想让它显示在我下面创建的li标签中。

这是我的代码:

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;
})

有没有人知道我怎样才能得到我想要的输出?

我得到的回复是:

(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"]

api调用dataOne

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
}
]
}

Answer 1

一些问题:

• 您的代码正在使用forEach循环daily数组(有8个条目)，但随后您使用Array(8).keys()再次使用8个迭代进行嵌套迭代。不需要嵌套循环。你只需要8个结果，而不是8 * 8个结果。

• 响应有一个dt成员，它表示给出天气条件的日期。所以没有必要摆弄today.getTime()。只需将dt*1000提供给Date构造函数。

• 您创建了tempDay，但随后将其丢弃。在forEach回调中返回它是无用的，因为forEach会忽略任何返回值。

• 如果你传递给daysForLocale所需的参数，它将更好地定位在循环之外。

无论如何，我排除了你用来创建HTML元素的代码，因为我认为这与你的问题无关。

下面是生成工作日和温度对的代码:

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);