当前位置： 文江博客话题详情

在仪表板小部件中显示总数值

发布于 2025-01-25 20:29:52 字数 8779 浏览 2 评论 0原文

hy，想从阵列中的数组中的仪表板中文凭我的仪表板中的总价值（poeple数量） 来自console.log（参与者）的输出是：

{
  "rows": [
    {
      "ELIGIBILITATE": null,
      "BFA": null,
      "id": "15f806ec-79cf-498f-8a4d-8bc8fdf8c43e",
      "Nume": "negrea",
      "Prenume": "ioana",
      "Varsta": 40,
      "Telefon": null,
      "email": null,
      "Cnp": null,
      "Gen": "Femei",
      "Nationalitate": null,
      "Judet": "Bistrita-Nasaud",
      "Adresa": null,
      "Domiciliul": null,
      "Companie": null,
      "Domeniu": null,
      "Statut": null,
      "ISCED": null,
      "INTRARE": null,
      "IESIRE": null,
      "CONSILIERE": null,
      "importHash": null,
      "createdAt": "2022-04-27T13:17:05.000Z",
      "updatedAt": "2022-04-27T13:17:05.000Z",
      "deletedAt": null,
      "EXPERTId": null,
      "createdById": null,
      "updatedById": null,
      "EXPERT": 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": []
    },
    {
      "ELIGIBILITATE": null,
      "BFA": null,
      "id": "cd60c561-56b7-4840-8c1e-03b9977c9a54",
      "Nume": "Negrea",
      "Prenume": "Paul",
      "Varsta": 43,
      "Telefon": null,
      "email": null,
      "Cnp": null,
      "Gen": "Barbati",
      "Nationalitate": null,
      "Judet": null,
      "Adresa": null,
      "Domiciliul": null,
      "Companie": null,
      "Domeniu": null,
      "Statut": "Angajat",
      "ISCED": "ISCED 6",
      "INTRARE": null,
      "IESIRE": null,
      "CONSILIERE": null,
      "importHash": null,
      "createdAt": "2022-04-20T17:40:11.000Z",
      "updatedAt": "2022-04-22T19:07:06.000Z",
      "deletedAt": null,
      "EXPERTId": null,
      "createdById": null,
      "updatedById": null,
      "EXPERT": 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": []
    },
    {
      "ELIGIBILITATE": "2022-04-10",
      "BFA": "2022-04-11",
      "id": "c53d945e-4bb1-49ab-91ca-c9e046ac5de7",
      "Nume": "Vlad",
      "Prenume": "Negrea",
      "Varsta": 43,
      "Telefon":null ,
      "email": null,
      "Cnp": null,
      "Gen": "Barbati",
      "Nationalitate": null,
      "Judet": "Bistrita-Nasaud",
      "Adresa": null,
      "Domiciliul": "Urban",
      "Companie": null,
      "Domeniu": null,
      "Statut": "Angajat",
      "ISCED": "ISCED 6",
      "INTRARE": "2022-04-09T21:00:00.000Z",
      "IESIRE": "2022-04-10T21:00:00.000Z",
      "CONSILIERE": "2022-04-12T21:00:00.000Z",
      "importHash": null,
      "createdAt": "2022-04-10T16:03:59.000Z",
      "updatedAt": "2022-04-22T19:07:30.000Z",
      "deletedAt": null,
      "EXPERTId": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
      "createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
      "updatedById": null,
      "EXPERT": {
        "id": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
        "firstName": "Admin",
        "lastName": null,
        "phoneNumber": null,
        "email": "",
        "role": "",
        "disabled": ,
        "password": "$2b$12$ez84WdAG//7RDXHpthnL6eLsOsIdJW2rBzcconlpZchGpm0INBqqS",
        "emailVerified": true,
        "emailVerificationToken": null,
        "emailVerificationTokenExpiresAt": null,
        "passwordResetToken": null,
        "passwordResetTokenExpiresAt": null,
        "provider": "local",
        "importHash": null,
        "createdAt": "2022-04-10T15:53:33.000Z",
        "updatedAt": "2022-04-12T16:18:08.000Z",
        "deletedAt": null,
        "createdById": null,
        "updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af"
      },
      "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
}

我已经尝试过：

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>

。参与者中的dashboard.js组件，

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;

我从每个参与者中得到了每个参与者的结果，例如

4S114 参与者： 0 0 1（这个有4S114信息）

我只需要显示具有4S114的参与者总数

原文

hy, want to diplay the total values( number of poeple) in my dashboard from an array in array
output from console.log(participanti) is:

{
  "rows": [
    {
      "ELIGIBILITATE": null,
      "BFA": null,
      "id": "15f806ec-79cf-498f-8a4d-8bc8fdf8c43e",
      "Nume": "negrea",
      "Prenume": "ioana",
      "Varsta": 40,
      "Telefon": null,
      "email": null,
      "Cnp": null,
      "Gen": "Femei",
      "Nationalitate": null,
      "Judet": "Bistrita-Nasaud",
      "Adresa": null,
      "Domiciliul": null,
      "Companie": null,
      "Domeniu": null,
      "Statut": null,
      "ISCED": null,
      "INTRARE": null,
      "IESIRE": null,
      "CONSILIERE": null,
      "importHash": null,
      "createdAt": "2022-04-27T13:17:05.000Z",
      "updatedAt": "2022-04-27T13:17:05.000Z",
      "deletedAt": null,
      "EXPERTId": null,
      "createdById": null,
      "updatedById": null,
      "EXPERT": 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": []
    },
    {
      "ELIGIBILITATE": null,
      "BFA": null,
      "id": "cd60c561-56b7-4840-8c1e-03b9977c9a54",
      "Nume": "Negrea",
      "Prenume": "Paul",
      "Varsta": 43,
      "Telefon": null,
      "email": null,
      "Cnp": null,
      "Gen": "Barbati",
      "Nationalitate": null,
      "Judet": null,
      "Adresa": null,
      "Domiciliul": null,
      "Companie": null,
      "Domeniu": null,
      "Statut": "Angajat",
      "ISCED": "ISCED 6",
      "INTRARE": null,
      "IESIRE": null,
      "CONSILIERE": null,
      "importHash": null,
      "createdAt": "2022-04-20T17:40:11.000Z",
      "updatedAt": "2022-04-22T19:07:06.000Z",
      "deletedAt": null,
      "EXPERTId": null,
      "createdById": null,
      "updatedById": null,
      "EXPERT": 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": []
    },
    {
      "ELIGIBILITATE": "2022-04-10",
      "BFA": "2022-04-11",
      "id": "c53d945e-4bb1-49ab-91ca-c9e046ac5de7",
      "Nume": "Vlad",
      "Prenume": "Negrea",
      "Varsta": 43,
      "Telefon":null ,
      "email": null,
      "Cnp": null,
      "Gen": "Barbati",
      "Nationalitate": null,
      "Judet": "Bistrita-Nasaud",
      "Adresa": null,
      "Domiciliul": "Urban",
      "Companie": null,
      "Domeniu": null,
      "Statut": "Angajat",
      "ISCED": "ISCED 6",
      "INTRARE": "2022-04-09T21:00:00.000Z",
      "IESIRE": "2022-04-10T21:00:00.000Z",
      "CONSILIERE": "2022-04-12T21:00:00.000Z",
      "importHash": null,
      "createdAt": "2022-04-10T16:03:59.000Z",
      "updatedAt": "2022-04-22T19:07:30.000Z",
      "deletedAt": null,
      "EXPERTId": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
      "createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
      "updatedById": null,
      "EXPERT": {
        "id": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
        "firstName": "Admin",
        "lastName": null,
        "phoneNumber": null,
        "email": "",
        "role": "",
        "disabled": ,
        "password": "$2b$12$ez84WdAG//7RDXHpthnL6eLsOsIdJW2rBzcconlpZchGpm0INBqqS",
        "emailVerified": true,
        "emailVerificationToken": null,
        "emailVerificationTokenExpiresAt": null,
        "passwordResetToken": null,
        "passwordResetTokenExpiresAt": null,
        "provider": "local",
        "importHash": null,
        "createdAt": "2022-04-10T15:53:33.000Z",
        "updatedAt": "2022-04-12T16:18:08.000Z",
        "deletedAt": null,
        "createdById": null,
        "updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af"
      },
      "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
}

i've 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>

in 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 the result from every participant like

4S114
Participants:
0
0
1 ( this one has 4S114 info)

I need to show only the total number of participants who have 4S114

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

￠好甜

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文