Count total Sum from fetched API / ReactJS

Question

I want to calculate totalSum. Api gives 'amount' rows, but I need to add them together and cant yet find correct function. I am still learning with reactjs.

const url = "http://127.0.0.1:8000/api/expense";
const TableCardList = () => {
    const [data, setData] = useState([]);
    const getData = async () => {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
        console.timeLog(data);
    };
    useEffect (() => {
        getData();
    }, []);

    let tableList = data.map((row) => {
        return (
            <TableCard
            key={row.id}
            id={row.id}
            created_at={row.created_at}
            title={row.title}
            category={row.category}
            amount={row.amount}
            />
        );
    });

    return(
        <div className="row">
            <table class="table">
            {tableList}
            <td><b className="number"> {totalSum} Eur</b></td>
            </table>
        </div>
    );
};
export default TableCardList;

I understand that I need lenght of array, but I dont know how to formulate this function and where to place it. I spend way too much time on this...lol — HHvis
– HHvis, Commented May 24, 2022 at 10:14

logancodemaker · Accepted Answer · 2022-05-24 10:26:18Z

1

Array.prototype.reduce can do the trick

const url = "http://127.0.0.1:8000/api/expense";
const TableCardList = () => {
  const [data, setData] = useState([]);
  const [totalSum, setTotalSum] = useState(0);

  useEffect(() => {
    const getData = async () => {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
      console.timeLog(data);
    };
    getData()
  }, []);

  useEffect(() => {
    const total = data.reduce((acc, row) => acc + row.amount, 0);
    setTotalSum(total)
  }, [data]);

  let tableList = data.map((row) => (
    <TableCard
      key={row.id}
      id={row.id}
      created_at={row.created_at}
      title={row.title}
      category={row.category}
      amount={row.amount}
    />
  ));

  return (
    <div className="row">
      <table class="table">
        {tableList}
        <td><b className="number"> {totalSum} Eur</b></td>
      </table>
    </div>
  );
};

export default TableCardList;

answered May 24, 2022 at 10:26

logancodemaker

7104 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

HHvis Over a year ago

Thank you, this is close but yet smth is missing. {totalSum} outputs all of row.amount numbers inline but doesnt add them together. Output looks like this: 0221.56433.0033.00332.5542.00 Eur. I need to add them.

logancodemaker Over a year ago

Maybe row.amount is in string format, try to add parseFloat to row.amount like this const total = data.reduce((acc, row) => acc + parseFloat(row.amount), 0);

HHvis Over a year ago

Sadly cant leave positive feedback. Thank you, works like a charm! I changed datatype to float because I needed to add cents as well. Bravo!

logancodemaker Over a year ago

Why can't you give positive feedback? you can still mark the question as answered to help others

Collectives™ on Stack Overflow

Count total Sum from fetched API / ReactJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related