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

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

 "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

CodePudding user response：

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.