Question

我正在构建气象应用程序，并希望显示5天的最低和最高温度。如何将JSON隔离到当前日期，然后取出此数字？

我尝试使用array.filter，但第一天就被卡住了。 APP是通过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个这样的对象（在LIST中），到3h预测为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

首先，您需要将每天可以在类似于以下内容的对象或地图中进行的所有值分组：

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

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

2 个答案: