如何在反应表中将映射数据显示为列表

Question

i want to show list of job id to single member id in react table

Answer 1

if you want to create a map member id to job ids, then you need to create a map structure:

function MyComponent() {
  const arr = [
    { memberId: 413, jobId: 42 },
    { memberId: 405, jobId: 52 },
  ];

  let memberIdToJobsMap = {};
  arr.forEach((el) => {
    memberIdToJobsMap[el.memberId] =  memberIdToJobsMap[el.memberId] || [];
    memberIdToJobsMap[el.memberId].push(el.jobId);
  });


  return (
    <div>
      {Object.keys(memberIdToJobsMap).map((memberId) => (
        <div key={memberId}>
          {memberId}:  {memberIdToJobsMap[memberId].join(", "))}
        </div>
      ))}
    </div>
  );
}

Answer 2

function MyComponent() {
  const arr = [
    { memberId: 413, jobId: 42 },
    { memberId: 405, jobId: 52 },
  ];

  return (

    <div>
        <table>
            <tr>
                <th>Member id</th>
                <th>Job id</th>
            </tr>
            {arr.map((el) => {
                return(
                    <tr key={el.memberId}>
                        <td>{el.memberId}</td>
                        <td>{el.jobId}</td>
                    </tr>
                )
            })}
        </table>
    </div>
  );
}

Answer 3

You need to reformat your data.

const groupedData = {};

  data.forEach((row) => {
    if (!groupedData[row.memberId]) {
      groupedData[row.memberId] = [];
    }

    groupedData[row.memberId].push(row.jobId);
  });

Full Example:

const data = [
  { memberId: 414, jobId: 1 },
  { memberId: 404, jobId: 2 },
  { memberId: 414, jobId: 3 },
  { memberId: 411, jobId: 6 },
  { memberId: 412, jobId: 7 },
  { memberId: 404, jobId: 8 }
];

export default function App() {
  const tableHeader = Object.keys(data[0]);
  const groupedData = {};

  data.forEach((row) => {
    if (!groupedData[row.memberId]) {
      groupedData[row.memberId] = [];
    }

    groupedData[row.memberId].push(row.jobId);
  });

  return (
    <div>
      <table>
        <tr>
          {tableHeader.map((key) => (
            <th>{key}</th>
          ))}
        </tr>
        {Object.keys(groupedData).map((key) => (
          <tr>
            <td>{key}</td>
            <td>{groupedData[key].join(", ")}</td>
          </tr>
        ))}
      </table>
    </div>
  );
}

Here is a live example:

Answer 4

First, you a need memoized data object grouped by memberId .

  const jobsByMemberId = useMemo(() => {
    return data.reduce(
      (result, item) => ({
        ...result,
        [item.memberId]: [...(result[item.memberId] || []), item.jobId],
      }),
      {}
    );
  }, []);

And then, convert that into memoized rows array that depends on jobsByMemberId

  const rows = useMemo(() => {
    return Object.keys(jobsByMemberId).map((key) => {
      return { memberId: key, jobIds: jobsByMemberId[key] };
    });
  }, [jobsByMemberId]);

and then you can render the table by mapping the rows data:

  return (
    <table>
      <thead>
        <tr>
          <th>Member ID</th>
          <th>Jobs ID</th>
        </tr>
      </thead>
      <tbody>
        {rows.map((row) => {
          return (
            <tr>
              <td>{row.memberId}</td>
              <td>{row.jobIds.join(",")}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );

You can see the result by running the code snippet below.

 const { useEffect, useMemo } = React; const data = [ { memberId: 413, jobId: 42 }, { memberId: 405, jobId: 52 }, { memberId: 414, jobId: 52 }, { memberId: 414, jobId: 46 }, { memberId: 414, jobId: 42 }, { memberId: 413, jobId: 5 }, { memberId: 413, jobId: 10 }, { memberId: 413, jobId: 5 }, { memberId: 413, jobId: 5 }, ]; function App() { const jobsByMemberId = useMemo(() => { return data.reduce( (result, item) => ({...result, [item.memberId]: [...(result[item.memberId] || []), item.jobId], }), {} ); }, []); const jobs = useMemo(() => { return Object.keys(jobsByMemberId).map((key) => { return { memberId: key, jobIds: jobsByMemberId[key] }; }); }, [jobsByMemberId]); return ( <table> <thead> <tr> <th>Member ID</th> <th>Jobs ID</th> </tr> </thead> <tbody> {jobs.map((job, index) => { return ( <tr key={index}> <td>{job.memberId}</td> <td>{job.jobIds.join(",")}</td> </tr> ); })} </tbody> </table> ); } ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div class='react'></div>