Блог

Я создаю приложение погоды и хочу показать наименьшую и наибольшую температуру за 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}amp;units=metricamp;appid=${Api_Key}`);
    setData(result.data);
  };
  fetch()
}, [city]);
  

У меня есть 40 объектов (в СПИСКЕ), подобных этому, прогноз на 5 дней на 3 часа :

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

Сначала вам нужно сгруппировать все значения за каждый день, что вы можете сделать в объекте или карте, которые выглядят примерно так:

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

Не уверен, правильно ли я вас понял.

Я предполагаю, что вы хотите отсортировать все данные по 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];