如何分离JSON并显示最大数量

Question

我正在构建天气应用程序，并希望显示5天的最小和最大温度。如何将JSON与当前日期分开，然后取出这些数字？

我试过使用array.filter，但我第一天就被困在了外卖上。应用程序是通过ReactJS (挂钩)构建的

const [data, setData] = useState(null);

useEffect(() => {
  const fetch = async () => {
    const result = await useAxios(`https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=metric&appid=${Api_Key}`);
    setData(result.data);
  };
  fetch()
}, [city]);

我有40个对象(在列表中)，像这样，3小时前预测5天：

{
  "city": {
    "id": 1851632,
    "name": "Shuzenji",
    "coord": {
      "lon": 138.933334,
      "lat": 34.966671
    },
    "country": "JP",
    "cod": "200",
    "message": 0.0045,
    "cnt": 38,
    "list": [
      {
        "dt": 1406106000,
        "main": {
          "temp": 298.77,
          "temp_min": 298.77,
          "temp_max": 298.774,
          "pressure": 1005.93,
          "sea_level": 1018.18,
          "grnd_level": 1005.93,
          "humidity": 87,
          "temp_kf": 0.26
        },
        "weather": [
          {
            "id": 804,
            "main": "Clouds",
            "description": "overcast clouds",
            "icon": "04d"
          }
        ],
        "clouds": {
          "all": 88
        },
        "wind": {
          "speed": 5.71,
          "deg": 229.501
        },
        "sys": {
          "pod": "d"
        },
        "dt_txt": "2014-07-23 09:00:00"
      }
    ]
  }

Answer 1

首先，您需要对每天的所有值进行分组，这可以在如下所示的object或Map中完成：

{
  "2014-07-23" : {max: [200, 201, 202], min : [ 180, 181, 182]},
  "2014-07-24" : {max: [200, 201, 202], min : [ 180, 181, 182]}
  ...
}

然后迭代该对象以创建具有所需日期和绝对值的对象数组。看起来像这样：

[
   {day: "2014-07-23", max : 202, min : 180},
   {day: "2014-07-24", max : 202, min : 180},
   ...
]

示例

​

let dayGroups = data.city.list.reduce((a, c) => {
  const dayTxt = c.dt_txt.slice(0, 10),
       {temp_min, temp_max} = c.main,
        curr =  a[dayTxt] = a[dayTxt] || {max: [], min: []}
  curr.max.push(temp_max);
  curr.min.push(temp_min); 
  return a
}, {});

const res = Object.entries(dayGroups).map(([day, {max, min}])=>{
   return { day, max: Math.max(...max), min : Math.min(...min)};
})

console.log(res)

<script>
  const data = {
    "city": {

      "list": [
      {
          "main": {
            "temp_min": 298.77,
            "temp_max": 298.774,
          },
          "dt_txt": "2014-07-23 09:00:00"
        },
             {
          "main": {
            "temp_min": 200,
            "temp_max": 201,
          },
          "dt_txt": "2014-07-23 12:00:00"
        },
        {
          "main": {
            "temp_min": 298.77,
            "temp_max": 298.774,
          },
          "dt_txt": "2015-07-23 09:00:00"
        },
               {
          "main": {
            "temp_min": 200,
            "temp_max": 201,
          },
          "dt_txt": "2015-07-23 12:00:00"
        }

      ]
    }
  }
</script>

​

Answer 2

我不确定我是否理解正确。

我假设您希望对main.temp上的所有数据进行排序

const list = [
        {
        "dt":1406106000,
        "main":{
            "temp":298.77,
            "temp_min":298.77,
            "temp_max":298.774,
            "pressure":1005.93,
            "sea_level":1018.18,
            "grnd_level":1005.93,
            "humidity":87,
            "temp_kf":0.26},
        "weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],
        "clouds":{"all":88},
        "wind":{"speed":5.71,"deg":229.501},
        "sys":{"pod":"d"},
        "dt_txt":"2014-07-23 09:00:00"
        }
];

list.sort((a,b)=>{
  return a.main.temp - b.main.temp  
})

const minimal =list[0];
const maximal = list[list.length-1];