Show current object to days and take out max temperature

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

Something like this:
Monday Lowest - 14 Highest - 22

Thursday Lowest - 14 Highest - 22
etc…

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]);

I’ve got array with 40 object like this, 5 days forecast by 3h :

0:
clouds: {all: 24}
dt: 1554044400
dt_txt: "2019-03-31 15:00:00"
main: {temp: 12.63, temp_min: 11.22, temp_max: 12.63, pressure: 1025.57, sea_level: 1025.57, …}
rain: {3h: 0.0275}
sys: {pod: "d"}
weather: [{…}]
wind: {speed: 6.07, deg: 76.0156}
__proto__: Object
1:
clouds: {all: 0}
dt: 1554055200
dt_txt: "2019-03-31 18:00:00"
main: {temp: 9.92, temp_min: 8.86, temp_max: 9.92, pressure: 1025.85, sea_level: 1025.85, …}
rain: {}
sys: {pod: "d"}
weather: [{…}]
wind: {speed: 5.51, deg: 75.002}
__proto__: Object

If you were to define a “day” as 12 AM through 11:59 PM, then it will be a bit tricky to create a true 5 day forecast, because unless the first object is for the forecast at 12 AM, you could be reporting an incorrect low or incorrect high for first or last days. For example, what if the current time was Monday at 5 PM, the 40 object 5 day forecast would start at 8 PM, so would you want to calculate the max temp for Monday starting at 8 PM? Probably not, because the hottest part of the day would already have passed. You could get true min and max temps for Tuesday, Wednesday, Thursday because you would have all the data for those days. Friday would have the same potential for reporting the wrong min or max, because it would only have 12 AM through 6 PM data.

My thinking is the best you could ever do would be to only report the next full 3 days worth of day unless the forecast starts at 12 AM (plus or minus an hour or two).

My suggestion is to look for a different API which actually gives the min and max forecast for each day.

@RandellDawson Ok, then could you show me how to make this function (to show min and max temp for next days)?

I will make app, to show only “now” temp for first day.

const result = data.reduce((acc, day) => {
  const date = day.dt_txt.split(' ')[0];
  if (acc[date]) {
    acc[date].temp_max = Math.max(acc[date].temp_max, day.main.temp_max);
    acc[date].temp_min = Math.min(acc[date].temp_min, day.main.temp_min);
  } else {
    acc[date] = { temp_max: day.main.temp_max, temp_min: day.main.temp_min };
  }
  return acc;
}, {});

This will not produce an accurate forecast for 5 days because the data may only be partial for the days (1st and 5th) for the reasons I described in my previous comment.

I will make app, to show only “now” temp for first day.

What about the last day (day 5)? Depending on when the user hits the API, the last day might only include 3 hours of data. The bottom line here just because data exists and can be summarized using a slick method, does not mean it is useful. To get useful summaries, you have to have the correct data to begin with. This is why I suggested pulling from a different API to achieve the desired results (a true 5 day forecast).