How to calculate the average amount for 10 days (24 elements for each day) out of an array with 240 elements in one function

[TobiasSteinhagen]

Hello there,

we want to calculate the average precipitation probability for each day, for ten days. We have an array with 240 elements and don't want to calculate it 10 times, like that:

const { precipitation_probability } = data.hourly;

  const precPropToday = Math.round(
    precipitation_probability
      .slice(0, 24)
      .reduce(
        (accumulator, currentValue) => accumulator + currentValue,
        initalValue
      ) / 24
  );

  const precPropTomorrow = Math.round(
    precipitation_probability
      .slice(24, 48)
      .reduce(
        (accumulator, currentValue) => accumulator + currentValue,
        initalValue
      ) / 24
  );
  const precPropDayAfterTomorrow = Math.round(
    precipitation_probability
      .slice(48, 72)
      .reduce(
        (accumulator, currentValue) => accumulator + currentValue,
        initalValue
      ) / 24
  );
  

We tried it like that:

  function precPropTest() {
    const precPropToday = Math.round(
      precipitation_probability
        .slice(0, 24)
        .reduce(
          (accumulator, currentValue) => accumulator + currentValue,
          initalValue
        ) / 24
    );
    precipitation_probability.splice(0, 24);
    return precPropToday;
  }

But unfortunately, we receive just the first element of the new array when we call it.

Here is our code and our PR

import { StyledButton, StyledListItem, Wrapper } from "./WeatherList.styled";

import RainIcon from "@/components/WeatherList/RainIcon.svg";
import { StyledUnorderedList } from "../TripList/TripList.styled";
import TempIcon from "@/components/WeatherList/TempIcon.svg";
import UVIcon from "@/components/WeatherList/UVIcon.svg";
import WeatherIcon from "@/components/WeatherList/WeatherIcon.svg";
import useSWR from "swr";
import { useState } from "react";

const fetcher = (...args) => fetch(...args).then((res) => res.json());

export default function WeatherList({ latitude, longitude }) {
  const [isHidden, setIsHidden] = useState(true);
  function toggleHidden() {
    setIsHidden(!isHidden);
  }
  const { data, isLoading } = useSWR(
    `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&hourly=precipitation_probability,uv_index&daily=temperature_2m_max,sunrise,sunset,uv_index_max&timezone=GMT&forecast_days=10`,
    fetcher
  );

  if (!data || isLoading) {
    return <h2>Weather is not available</h2>;
  }

  const {
    temperature_2m_max: temperatures,
    time: dates,
    uv_index_max: uv_index,
  } = data.daily;

  const { temperature_2m_max: temperature_unit } = data.daily_units;
  const initalValue = 0;

  const { precipitation_probability } = data.hourly;

  const precPropToday = Math.round(
    precipitation_probability
      .slice(0, 24)
      .reduce(
        (accumulator, currentValue) => accumulator + currentValue,
        initalValue
      ) / 24
  );

  const precPropTomorrow = Math.round(
    precipitation_probability
      .slice(24, 48)
      .reduce(
        (accumulator, currentValue) => accumulator + currentValue,
        initalValue
      ) / 24
  );
  const precPropDayAfterTomorrow = Math.round(
    precipitation_probability
      .slice(48, 72)
      .reduce(
        (accumulator, currentValue) => accumulator + currentValue,
        initalValue
      ) / 24
  );

  function precPropTest() {
    const precPropToday = Math.round(
      precipitation_probability
        .slice(0, 24)
        .reduce(
          (accumulator, currentValue) => accumulator + currentValue,
          initalValue
        ) / 24
    );
    precipitation_probability.splice(0, 24);
    return precPropToday;
  }

  const { precipitation_probability: precProbUnit } = data.hourly_units;

  // const precProp = [precPropToday, precPropTomorrow, precPropDayAfterTomorrow];

  return (
    <>
      <StyledButton onClick={toggleHidden}>
        <WeatherIcon />
        {isHidden ? "Show Weather Forecast" : "Hide Weather Forecast"}
      </StyledButton>
      {!isHidden ? (
        <StyledUnorderedList>
          {dates.map((date, index) => (
            <StyledListItem key={date}>
              <h3>{dates[index]}</h3>
              <Wrapper>
                <TempIcon />
                <h3>
                  {temperatures[index]}
                  {temperature_unit}
                </h3>
              </Wrapper>
              <Wrapper>
                <UVIcon />
                <h3>{uv_index[index]}</h3>
              </Wrapper>
              <Wrapper>
                <RainIcon />
                <h3>
                  {precPropToday}
                  {precProbUnit}
                </h3>
              </Wrapper>
            </StyledListItem>
          ))}
        </StyledUnorderedList>
      ) : null}
    </>
  );
}

Thanks in advance, looking forward to your feedback! ✌️

[e-rmkt]

We found a possible solution, that works, but we are unsure if this is considered "good" or best practice:

const dailyAverages = [];

  precipitation_probability.forEach((value, index) => {
    const dayIndex = Math.floor(index / 24); 
    if (!dailyAverages[dayIndex]) {
      dailyAverages[dayIndex] = []; 
    }
    dailyAverages[dayIndex].push(value);
  });

  const calculatedAverages = dailyAverages.map((dayData) => {
    const sum = dayData.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
    return Math.round(sum / dayData.length);
  });

[ahohnsen]

Nice solution!

I came up with something similar:

const dailyAverages = [];

  for (let i = 0; i < precipitation_probability.length; i += 24) {
    const oneDayData = precipitation_probability.slice(i, i + 24);
    const dailyAverage = oneDayData.reduce((sum, value) => sum + value, 0) / 24;
    dailyAverages.push(dailyAverage);
  }

[moonwave99]

Well done!

Or if you are feeling super functional fancy:

// group an array in chunks of pageSize length
// e.g. paginate([1, 2, 3, 4], 2) => [[1, 2], [3, 4]]
function paginate(array = [], pageSize = 1) {
  const pageCount = Math.round(array.length / size);
  return Array.from({ length: pageCount }, (_, index) => index).reduce(
    (memo, page) => [...memo, array.slice(page, page + pageSize)],
    []
  );
}

function average(array = []) {
  return array.reduce((sum, value) => (sum += value)) / array.length;
}

const averageDailyPrecipitationProbability = paginate(precipitation_probability, 24).map(average);