javascript - 如何从天气 API 数组中获取单独的每日数组，该数组每 3 小时提供 5 天的报告

Question

请检查您是否可以帮助任何人。我一直在开发我的天气应用程序，该应用程序是使用 axios 和 openweathermap.org 在 React 上构建的。 我有点坚持以我需要的方式获取数据。我正在使用它的 5 天预测。它为您提供 5 天内每 3 小时预报的报告。它为您提供 5 天内 40 份报告。因此，您会收到中间 3 天的 8 份报告，而当前和第五天的报告则根据当天的剩余时间获得剩余的报告。这是该报告的 API 响应:report 。 所以你会得到这样的响应:

{
  "data": {
"cod": "200",
"message": 0.0062,
"cnt": 39,
"list": [
  {
    "dt": 1540177200,
    "main": {
      "temp": 24.55,
      "temp_min": 20.88,
      "temp_max": 24.55,
      "pressure": 1008.67,
      "sea_level": 1025.96,
      "grnd_level": 1008.67,
      "humidity": 58,
      "temp_kf": 3.67
    },
    "weather": [
      {
        "id": 800,
        "main": "Clear",
        "description": "clear sky",
        "icon": "02d"
      }
    ],
    "clouds": {
      "all": 8
    },
    "wind": {
      "speed": 3.82,
      "deg": 340.5
    },
    "sys": {
      "pod": "d"
    },
    "dt_txt": "2018-10-22 03:00:00"
  },
  {
    "dt": 1540188000,
    "main": {
      ...
    },
  },
  {
    "dt": 1540198800,
    "main": {
     ...
    },
  },
  {
    "dt": 1540587600,
    "main": {
      . . .
    }
  }
]
}

我只是总结了一下。我只是输入了第一项的全部数据，其余的数据我都输入了……这是一个包含 40 项的长数组。每个都有一个唯一的日期时间戳，其开头为“dt”。我需要根据特定日期获取 5 个数组。为此，我考虑转换时间戳(dt)，然后获取导致同一“日”的所有项目。像这样转换时间戳(对所有项目使用 forEach):

 let day ='';
 day = new Date(dt *1000);
 day = day.getDate();

转换数组时出现两个问题:

• 我再次得到一个包含 40 个项目的大数组，但我需要基于日期的 5 个数组，以便我可以单独获得每天的报告
• 其次，我丢失了时间戳中的 dt。我需要保留它，以便我可以在我的应用程序中显示天气预报。

我想根据该时间戳分别显示 5 天的信息。

感谢大家的帮助和想法。

Answer 1

您可以通过首先创建一个对象来保存从当前日期到 future 5 天的每一天的报告来实现此目的。然后迭代“list”的元素，并将每个(报告)放在对象中的正确位置。

这是一个例子:

请注意，此代码中的响应等于您在问题中包含的数据。

const today = new Date();
const day = 60 * 60 * 24 * 1000;

const dateBins = {};
const nBins = 6; // there can be reports for up to 6 distinct dates

for (let i = 0; i < nBins; i++) {
    // set up a bin (empty array) for each date
    const date = new Date(today.getTime() + i * day);
    dateBins[date.getDate()] = [];
}

const reports = response.data.list;
for (const report of reports) {
    const reportDate = new Date(report.dt * 1000).getDate();
    dateBins[reportDate].push(report);
}

将 today 的声明更改为 new Date('2018-10-21T00:00:00.000Z') 将允许此代码处理您的特定数据已经发帖了。

dateBins 与您发布的数据的结果:

{ '21':
    [ { dt: 1540177200,
       main: [Object],
       weather: [Array],
       clouds: [Object],
       wind: [Object],
       sys: [Object],
       dt_txt: '2018-10-22 03:00:00' },
     { dt: 1540188000, main: {} } ],
  '22': [ { dt: 1540198800, main: {} } ],
  '23': [],
  '24': [],
  '25': [],
  '26': [ { dt: 1540587600, main: {} } ] }