javascript - 使用Weather API并按日期排序

Question

我试图按日期过滤数组，然后为每一天创建一个组件。对我来说最大的障碍是日期以 UTC 格式显示，我不知道如何将其转换为可用的格式来循环。除非有人建议更有效的方法，否则目标是能够对日期数据进行分组，调​​用该数组(即 firstDay[0] )并循环遍历这些数组以查找当天的最高温度、平均湿度等。但是我认为第一步是按日期排序。即 FiveDays[0].maxtemp

JSON https://api.openweathermap.org/data/2.5/forecast?q=Austin,USA&appid=583f803dfc6a7f2f96ff9957c330c2b0&units=imperial

            var firstDay = [];
            var firstDayVar;
            for (i = 0; i < items.list.length; i++){
                let item = items.list[i].dt
                let date = new Date(item*1000)
                let dateNumber = date.getDate()
                let date_text = items.list[i].dt_txt
                // Thought this would be useful to organize by but not really applicable?
                let dateString = date_text.substring(0,10)


                console.log(dateString)
                //outputs yyyy-mm-dd
                if (firstDayVar === undefined){
                    firstDayVar = dateNumber
                } else if (firstDayVar !== dateNumber) {
                    firstDayVar = dateNumber
                    firstDay.push(firstDayVar);
            }
        }

Answer 1

这就是我根据日期对数据进行分组的方式。现在您可以根据日期循环它们，每个日期都有一个来自 api 列表属性的原始对象数组。

API 为您提供 [DATE]_[TIME] 的数组项，我们的目标是将相同的日期分组到 [DATE] 的字典中，其中每个单独的日期将包含原始项的列表(针对该特定日期)

[ D1.T1, D1.T2, D2.T1, D3.T1, D3.T2, D3.T3 ] // Original Array of items

.

{ D1: [D1.T1, D1.T2], D2: [D2.T1], D3: [D3.T1, D3.T2, D3.T3] } // Object grouped items by date

如果你仔细观察，你的想法是保证你的数据安全，这样你的原始结构就安全。现在，您循环分组数据的键，您可以访问单个日期的所有项目。

fetch('https://api.openweathermap.org/data/2.5/forecast?q=Austin,USA&appid=583f803dfc6a7f2f96ff9957c330c2b0&units=imperial').then(response => response.json()).then(data => {
  const groupedData = data.list.reduce((days, row) => {
    const date = row.dt_txt.split(' ')[0];
    days[date] = [...(days[date] ? days[date]: []), row];
    return days;
  }, {});
  
  for(let date of Object.keys(groupedData)){
    console.log('Date:', date); 
    // current date -> date
    // original items array for this date -> groupedData[date]
    console.log('RowCount:', groupedData[date].length);
    console.log('MaxTemp:', getMax(groupedData[date], 'temp_max'));
    console.log('MinTemp:', getMin(groupedData[date], 'temp_min'));
    console.log('MaxHumidity:', getMax(groupedData[date], 'humidity'));
    
    console.log('\n\n');
  }
});

function getMax(arr, attr){
  return Math.max.apply(Math, arr.map(item => item.main[attr]));
}

function getMin(arr, attr){
  return Math.min.apply(Math, arr.map(item => item.main[attr]));
}

由于您的大部分数据都在列表内的主要属性中，因此我创建了 2 个辅助函数，它们将比较所有项目并获取传递属性的最大值和最小值，例如:temp_max、temp_min、湿度等。您可以获取自己的自定义如果您愿意，可以使用方法。

希望这有帮助!