0
238
VistasJavaScript: ¿Mostrar la matriz de datos de un objeto en una tabla?
Tengo un objeto data que contiene una matriz de datos. Aquí está la estructura del objeto de data .
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']Logré mostrar los valores de cada matriz de la siguiente manera (filtra valores únicos de cada matriz)
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> );Esto es lo que muestra el código anterior
Finalmente, esta es la forma de tabla esperada para mostrar los datos.
¿Cómo puedo hacer esto? Gracias
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Listo 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; }Reaccionar
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} />Datos que proporcionaste
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
Parece que necesita las claves de los datos, así como los valores. Puede obtener eso usando object.entries en lugar de valores.
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