0
235
VistasJavaScript: Display an object's array of data in a table?
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 class="table table-striped ">
<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
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Ready https://codesandbox.io/s/silent-tree-u4qelb?file=/src/styles.css
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"]
};
·
Juan Pablo Isaza
Denunciar
0
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>
);
})
·
Juan Pablo Isaza
Denunciar
Responde la pregunta