获取对象中的单个索引以与 api 调用连接
Posted
技术标签:
【中文标题】获取对象中的单个索引以与 api 调用连接【英文标题】：getting a single index in an object to concatonate with an api call 【发布时间】：2021-10-21 22:28:54 【问题描述】：我正在尝试获取 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 call for 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
]
【问题讨论】：
不包括获取操作，可以包括响应对象吗？这样我们就可以在没有 apiKey 的情况下运行您的代码（我不会得到）。 响应更新 我想你误会了。我不是要求控制台输出，而是dataOne 的内容（JSON 格式）。
抱歉，我已经更新了 dataOne 的输出
抱歉，已添加 JSON
【参考方案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);【讨论】：
非常感谢，太难了。以上是关于获取对象中的单个索引以与 api 调用连接的主要内容，如果未能解决你的问题，请参考以下文章