如何隔离JSON并显示最大的数字 [英] How to segregate JSON and show the largest number

问题描述

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

I'm build weather app, and want to show the smallest and largest temperature for 5 days. How to segregate JSON to current days and then take out this numbers?

我尝试过使用array.filter，但是我第一天就被困在了外面。 APP是通过ReactJS构建的（钩子）

I tried use array.filter but I'm stuck on take out first day. APP is build via ReactJS (hooks)

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个这样的对象（在LIST中），5天预测3h：

I've got 40 objects(in LIST) like this, 5 days forecast by 3h :

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

推荐答案

首先，您需要将每天的所有值分组，您可以在对象或地图中执行以下操作：

First you need to group all the values for each day which you can do in an object or Map that looks something like:

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

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

Then iterate that object to create array of objects that have the day and absolute values you want. Will look something like:

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

---

示例

---

Example

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>

这篇关于如何隔离JSON并显示最大的数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！