I have an object data which contains array of data. Here is the structure of data object.

EMC: (4) ['EMC Symmetric VMAX', 'EMC Symmetric VMAX', 'EMC Symmetric VMAX', 'EMC Symmetric VMAX']
MICROSOFT: (8) ['OFFICE 365', 'Windows', 'OFFICE 365', 'Windows', 'OFFICE 365', 'Windows', 'OFFICE 365', 'Windows']
Open Source: (4) ['OpenSSL', 'OpenSSL', 'OpenSSL', 'OpenSSL']
Oracle: (12) ['IAM', 'MySQL Server', 'MySQL Server', 'IAM', 'MySQL Server', 'MySQL Server', 'IAM', 'MySQL Server', 'MySQL Server', 'IAM', 'MySQL Server', 'MySQL Server']
RED HAT: (4) ['RHEL', 'RHEL', 'RHEL', 'RHEL']

I managed to display the values of each array as follows(filters unique values of each array)

const DisplayData = Object.values(data)?.map((vendor) => {
    const uniqValues = [...new Set(vendor)];
    return (
      <tr>
        <td>{}</td>
        <td>{uniqValues}</td>
      </tr>
    );
  });
  return (
    <div className="z-100 flex justify-center mb-24 bg-white items-center mt-10">
      <div className="text-black">
        <div className="rounded overflow-hidden flex  justify-center items-center">
          <table >
            <thead>
              <tr>
                <th>Vendor</th>
                <th>Product</th>
              </tr>
            </thead>
            <tbody>{DisplayData}</tbody>
          </table>
        </div>
      </div>
    </div>
  );

Here is what the above code displays

Finally this is the expected table forma to display the data.

How can I do this? Thanks

CodePudding user response：

Ready

Css

table {
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}

table * {
  box-sizing: border-box;
}

th {
  border: 1px solid #d8d8d8;
  padding-top: 14px;
  padding-bottom: 14px;
  min-width: 220px;
  text-align: left;
  padding-left: 10px;
}

td {
  border-top: 1px solid #d8d8d8;
  padding: 8px 0;
  padding-left: 10px;
}

React

function removeDuplicates(data, i) {
  const arr = Object.values(data)[i];
  return arr ? [...new Set(arr)] : [];
}

const Rows = ({ data }) => {
  const keys = Object.keys(data);

  return (
    <>
      {keys.map((key, i) => (
        <tr>
          <td>{key}</td>
          <td>
            {removeDuplicates(data, i).map((item, i) => (
              <div key={i}>{item}</div>
            ))}
          </td>
        </tr>
      ))}
    </>
  );
};

const DisplayData = ({ data }) => {
  const hasData = Object.values(data)?.length;
  return (
    <table>
      <thead>
        <tr>
          <th>Vendor</th>
          <th>Product</th>
        </tr>
      </thead>
      <tbody>{hasData && <Rows data={data} />}</tbody>
    </table>
  );
};

// how you render <DisplayData data={data} />

Data you provided

const data = {
  EMC: [
    "EMC Symmetric VMAX",
    "EMC Symmetric VMAX",
    "EMC Symmetric VMAX",
    "EMC Symmetric VMAX"
  ],
  MICROSOFT: [
    "OFFICE 365",
    "Windows",
    "OFFICE 365",
    "Windows",
    "OFFICE 365",
    "Windows",
    "OFFICE 365",
    "Windows"
  ],
  "Open Source": ["OpenSSL", "OpenSSL", "OpenSSL", "OpenSSL"],
  Oracle: [
    "IAM",
    "MySQL Server",
    "MySQL Server",
    "IAM",
    "MySQL Server",
    "MySQL Server",
    "IAM",
    "MySQL Server",
    "MySQL Server",
    "IAM",
    "MySQL Server",
    "MySQL Server"
  ],
  "RED HAT": ["RHEL", "RHEL", "RHEL", "RHEL"]
};

CodePudding user response：

Seems like you need the keys of data as well as the values. You can get that by using object.entries instead of values.

Object.entries(data)?.map(([key, vendor]) => {
    const uniqValues = [...new Set(vendor)];
    return (
      <tr>
        <td>{key}</td>
        <td>{uniqValues}</td>
      </tr>
    );
})