Sum field value in React from JSON API data

Question

I have this data array retrieved from the database with Axios, I want to return the sum of a field based on some conditions

I already used map() to grab the data from my backend :

// getData.js

return (
  <ul>
    {attendance.map(({ _id, name, male }) => {

      return (
        <div key={_id}>
          <br />
          <hr />
          <li>{name}</li>
          {/* the condition is to render only male that are  >= 2 */}
          <li>{male >= 2 ? male : 0}</li>
        </div>
      )
    })}
  </ul>
)

//output

Joshua Jaccob
2

Fabio Rio
2

Lancelot Abe
2

Bello
0

Becca Andrew
0

I want to sum the total male that fit the condition, also render only those that fit the condition

What's your question? Does your code not work? It's difficult to tell with this code what the issue is because you haven't provided an example of the data you're using. — Andy
– Andy, Commented Sep 6, 2019 at 7:39

8SINS · Accepted Answer · 2019-09-06 09:34:51Z

2

You could push all attendances with your condition into a list, then length of the list will be total number.

The last, just render the list.


// get all attendances with male >= 2
const list = attendance.filter(({ male }) => {
  return male >= 2;
});

return (
  <div>
    <h3>Total attendances with male >= 2: {list.length}</h3>
    <ul>
//pass in name and _id
      {list.map(({ name,_id }) => {
        return (
          <div key={_id}>
            <br />
            <hr />
            <li>{name}</li>
          </div>
        )
      })}
    </ul>
  </div>
)

edited Sep 6, 2019 at 9:34

8SINS

4612 gold badges6 silver badges19 bronze badges

answered Sep 6, 2019 at 7:46

hoangdv

16.3k4 gold badges31 silver badges54 bronze badges

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

Comments

suhail ahmed · Accepted Answer · 2019-09-06 07:48:06Z

0

attendance.filter((male)=>male>=2)
.map((_id,ind,male)=>{
return (
 //male.length will give you the sum of total male that fill the condition

)
}

Array.prototype.filter gives u an array of results which only passes the condition in this case the age>=2

answered Sep 6, 2019 at 7:48

suhail ahmed

1221 silver badge12 bronze badges

Comments

Ajay Varghese · Accepted Answer · 2019-09-06 08:48:55Z

0

Use .filter function to filter the array using the condition then use map to render like below.

return (
  <ul>
    {attendance
      .filter(({ male }) => male >=2 )
      .map(({ _id, name, male }) => {
        return (
          <div key={_id}>
            <br />
            <hr />
            <li>{name}</li>
            <li>{male}</li>
          </div>
        )
      })
    }
  </ul>
);

edited Sep 6, 2019 at 8:48

answered Sep 6, 2019 at 7:41

Ajay Varghese

7695 silver badges14 bronze badges

Collectives™ on Stack Overflow

Sum field value in React from JSON API data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related