How to sum value of specific keys in an Axios and reactjs Response-CodePudding

Hi i m working with react and axios and i want to sum value in reactjs that value i m getting from api. i want to sum TotalVolume, TotalVolume, totalSell and totalBuy from array.

What i am getting

{
    "TotalTrade": 2,
    "TotalVolume": 200,
    "totalSell": 0,
    "totalBuy": 2
},
{
    "TotalTrade": 2,
    "TotalVolume": 200,
    "totalSell": 1,
    "totalBuy": 1
},

What i am Want

{
    "TotalTrade": 4,
    "TotalVolume": 400,
    "totalSell": 2,
    "totalBuy": 2
},

my Axios code

  componentDidMount() {
    this.getData()
  };

  getData() {
    axios.get(`https://api-test-demo.com/performance/get/all/orders/details/between/dates?page_from=0&page_to=100&date_from=&date_to=`)
      .then(res => {
        const faq = res.data;
        this.setState({ faq });
      })
  };

Showing data here

        {this.state.faq &&
          <div className="faqListC">
            {this.state.faq.map(faqList => (
              <div className="faqList">
                <div className="qNum">Question: <b>{faqList.ClientInv19Id}</b>
                </div>

                <div className="aNum">
                  <span className="ansD">Ans.: </span>
                  <div
                    className="innerF"
                    >
{faqList.ClientBowId}
                    </div>

                </div>
              </div>
            ))}

          </div>}

CodePudding user response：

If we say your array is called results, we could use a reduce array function to add together all the values like below:

let resultSum = results.reduce(function(previous, current) {
  return {
    TotalTrade: previous.TotalTrade   current.TotalTrade,
    TotalVolume: previous.TotalVolume   current.TotalVolume,
    totalSell: previous.totalSell   current.totalSell,
    totalBuy: previous.totalBuy   current.totalBuy,

  }
});

CodePudding user response：

Okay so basically your API is returning this Array if I'm not wrong

[
{
    "TotalTrade": 2,
    "TotalVolume": 200,
    "totalSell": 0,
    "totalBuy": 2
},
{
    "TotalTrade": 2,
    "TotalVolume": 200,
    "totalSell": 1,
    "totalBuy": 1
},
]

... and many more objects in this response array

what you'd want to do here is take the array from the response and run it through a loop and add all the values manually. you can create a new state/variable as well depending upon your requirement to update the component.

//create anew state variable if you want your component to reload
const [reponseData, setResponseData] = react.useState({
    TotalTrade: 0,
    TotalVolume: 0,
    totalSell: 0,
    totalBuy: 0

})

use this in the "Then" call

let totalTrade = 0, totalVolume = 0, totalSell = 0, totalBuy = 0; 
let data = response.data;
for(var i=0; i< data.length ; i  ) 
{
   totaltrade  = data[i].TotalTrade;
   totalVolume  = data[i].TotalVolume;
   totalSell  = data[i].totalSell;
   totalBuy  = data[i].totalBuy;
}

//after computing the actual sum values set the state for the state variable to update the component. 
//your setState method goes here, I've just used a state of my own
setResponseData({...responseData, TotalTrade : totalTrade, TotalVolume : totalVolume, totalSell : totalSell, totalBuy : totalBuy});