Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How do i get the sum of object in arrays react js based on condition

hy,i want to show the total number of people in my dashboard from an array in array which have the value of (Nume:4s114), from INDICATORI array. It shoud be 1.

I have tried so far:
dashboard.js

  const [popular, setPopular] = useState([]);

  useEffect(() => {
    fetchPopular();
  }, []);

    const fetchPopular = async () => {
    const data = await fetch('http://localhost:8080/api/participanti');
    const participanti = await data.json();
    console.log(participanti);
    setPopular(participanti.rows);
    
  };
  
 <div>
    return (
{popular.map((participant) => {

          return <Participant key={participant.id} participant={participant} />;
          

        })}
</div>

console.log(participanti) output is

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

 "rows": [
   {
     "id": "15f806ec-79cf-498f-8a4d-8bc8fdf8c43e",
     "Nume": "negrea",
     "Prenume": "ioana",
     "Varsta": 40,
     "createdAt": "2022-04-27T13:17:05.000Z",
     "updatedAt": "2022-04-27T13:17:05.000Z",
     "deletedAt": null,
     "INDICATORI": [
       {
         "id": "068170b3-7995-41df-8fac-4f2bc577e2c6",
         "Nume": "4S110",
         "importHash": null,
         "createdAt": "2022-04-10T15:58:58.000Z",
         "updatedAt": "2022-04-10T15:58:58.000Z",
         "deletedAt": null,
         "createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "participantiINDICATORIIndicatori": {
           "createdAt": "2022-04-27T13:17:05.000Z",
           "updatedAt": "2022-04-27T13:17:05.000Z",
           "participantiId": "15f806ec-79cf-498f-8a4d-8bc8fdf8c43e",
           "indicatoriId": "068170b3-7995-41df-8fac-4f2bc577e2c6"
         }
       }
     ],
     "Cursuri": []
   },
   {
     "id": "15f806ec-79cf-498f-8a4d-8bc8fdf8c43r",
     "Nume": "Negrea",
     "Prenume": "Paul",
     "Varsta": 43,
     "createdAt": "2022-04-27T13:17:05.000Z",
     "updatedAt": "2022-04-27T13:17:05.000Z",
     "deletedAt": null,
     "INDICATORI": [
       {
         "id": "068170b3-7995-41df-8fac-4f2bc577e2c6",
         "Nume": "4S110",
         "importHash": null,
         "createdAt": "2022-04-10T15:58:58.000Z",
         "updatedAt": "2022-04-10T15:58:58.000Z",
         "deletedAt": null,
         "createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "participantiINDICATORIIndicatori": {
           "createdAt": "2022-04-23T13:52:40.000Z",
           "updatedAt": "2022-04-23T13:52:40.000Z",
           "participantiId": "cd60c561-56b7-4840-8c1e-03b9977c9a54",
           "indicatoriId": "068170b3-7995-41df-8fac-4f2bc577e2c6"
         }
       },
       {
         "id": "26a19d05-f351-4097-a667-509518c028d6",
         "Nume": "4S111.2",
         "importHash": null,
         "createdAt": "2022-04-10T15:58:47.000Z",
         "updatedAt": "2022-04-10T15:58:47.000Z",
         "deletedAt": null,
         "createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "participantiINDICATORIIndicatori": {
           "createdAt": "2022-04-23T13:52:40.000Z",
           "updatedAt": "2022-04-23T13:52:40.000Z",
           "participantiId": "cd60c561-56b7-4840-8c1e-03b9977c9a54",
           "indicatoriId": "26a19d05-f351-4097-a667-509518c028d6"
         }
       }
     ],
     "Cursuri": []
   },
   {
     "id": "c53d945e-4bb1-49ab-91ca-c9e046ac5de7",
     "Nume": "Vlad",
     "Prenume": "Negrea",
     "Varsta": 43,
     "createdAt": "2022-04-27T13:17:05.000Z",
     "updatedAt": "2022-04-27T13:17:05.000Z",
     "deletedAt": null,
     "INDICATORI": [
       {
         "id": "068170b3-7995-41df-8fac-4f2bc577e2c6",
         "Nume": "4S110",
         "importHash": null,
         "createdAt": "2022-04-10T15:58:58.000Z",
         "updatedAt": "2022-04-10T15:58:58.000Z",
         "deletedAt": null,
         "createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "participantiINDICATORIIndicatori": {
           "createdAt": "2022-04-10T17:23:23.000Z",
           "updatedAt": "2022-04-10T17:23:23.000Z",
           "participantiId": "c53d945e-4bb1-49ab-91ca-c9e046ac5de7",
           "indicatoriId": "068170b3-7995-41df-8fac-4f2bc577e2c6"
         }
       },
       {
         "id": "1f163556-94ef-49a5-9d2d-067a9a193d71",
         "Nume": "4S114.3",
         "importHash": null,
         "createdAt": "2022-04-10T15:58:27.000Z",
         "updatedAt": "2022-04-10T15:58:27.000Z",
         "deletedAt": null,
         "createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "participantiINDICATORIIndicatori": {
           "createdAt": "2022-04-10T17:23:23.000Z",
           "updatedAt": "2022-04-10T17:23:23.000Z",
           "participantiId": "c53d945e-4bb1-49ab-91ca-c9e046ac5de7",
           "indicatoriId": "1f163556-94ef-49a5-9d2d-067a9a193d71"
         }
       },
       {
         "id": "846af8c5-e51a-4536-b68a-febc93ecfe26",
         "Nume": "4S114",
         "importHash": null,
         "createdAt": "2022-04-10T15:57:47.000Z",
         "updatedAt": "2022-04-10T15:57:47.000Z",
         "deletedAt": null,
         "createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
         "participantiINDICATORIIndicatori": {
           "createdAt": "2022-04-10T17:23:23.000Z",
           "updatedAt": "2022-04-10T17:23:23.000Z",
           "participantiId": "c53d945e-4bb1-49ab-91ca-c9e046ac5de7",
           "indicatoriId": "846af8c5-e51a-4536-b68a-febc93ecfe26"
         }
       }
     ],
     "Cursuri": []
   }
 ],
 "count": 6
}

in my participant.js component

const Participant = ({participant}) => {

  
  const Total=participant.INDICATORI.reduce((total, item) => total + (item.Nume == "4S114" ), 0)
const l = Total
console.log(l)
  return (
    <div>
      <h5>{l}</h5>
      
    </div>
  );
};


  export default Participant;

I get instead all the people like 0 0 1 in response (meaning 2 people does not have the indicator 4s114, one does.i only want to show 1 the person that has (1). Appreciate your help

>Solution :

In dashboard.js, you should have something like this:

const total = popular.reduce((total, participant) => total + participant.INDICATORI
  .filter(indicator => indicator.Nume === "4S114").length,0)

This way, total contains the amount of participant that match your condition

Since you need to iterate over every participant, it does not make sense to put this logic in each Participant component, but rather in the Parent component.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading