Display a sum of value in json in React.js

Question

I have this json and I would like to view a sum of available_funds in my Component in React.js. If is this possible? could I ask for an example of viewing this? Because I can not do it.

[
  {
    id: 1,
    id_owner: 1,
    account_bill: 123456789,
    available_funds: 100
  },
  {
    id: 2,
    id_owner: 1,
    account_bill: 111111111,
    available_funds: 20
  }
]

React.js component:

class AvailableFunds extends Component {
  constructor() {
    super();
    this.state = {
      availableFunds: '',
      isLoading: true,
    };
  }

  componentDidMount() {
    axios
      .get('http://localhost:3000/api/bills/1')
      .then(({ data }) => {
        console.log(data);
        this.setState({
          availableFunds: data.available_funds,
          isLoading: false
        });
      })
      .catch(err => {});
  }

...?

khartnett · Accepted Answer · 2018-12-08 00:04:43Z

3

if your data is an array of objects, you can use reduce to get the sum:

data.reduce((accumulator, currentValue) => accumulator + currentValue.available_funds, 0)

answered Dec 8, 2018 at 0:04

khartnett

8615 silver badges15 bronze badges

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

2 Comments

user10713925 Over a year ago

Can u write a example full code of display this value in my component?

TeaNyan Over a year ago

@ReactRouter2 You just need to replace data.available_funds in your setState function with the code @khartnett has provided in the answer.

Kubwimana Adrien · Accepted Answer · 2018-12-08 00:10:42Z

0

Try this:

componentDidMount() {
    axios
        .get('http://localhost:3000/api/bills/1')
        .then(({ data }) => {
        var sum = 0;
        if(typeof data == 'object'){
            data.forEach(funds => {
                sum += parseFloat(funds.available_funds);
            });
        }
        this.setState({
            availableFunds: sum,
            isLoading: false
        });
    })
    .catch(err => {});
}

answered Dec 8, 2018 at 0:10

Kubwimana Adrien

2,5512 gold badges10 silver badges13 bronze badges

Collectives™ on Stack Overflow

Display a sum of value in json in React.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related