Me gustaría crear una tabla con la información de una matriz. Creé una tabla, sin embargo, no puedo pasar la matriz a la tabla. Me gustaría que creara una tabla automáticamente a partir de la matriz.
<table class="col-3 table tableforContact" id="contactinformation"> <thead> <tr> </tr> </thead> <tbody> </tbody> </table>Así es como defino mi matriz:
const responses = JSON.parse(user.Contacts)Finalmente, este es el contenido de la matriz:
[{"ContactName": "45551134", "ContactNumber": "95011225"}]¿Está bien usar jQuery? en caso afirmativo, puede usar la función $.each .
const array = [{"ContactName": "45551134", "ContactNumber": "95011225"}] $.each(array, function(index){ $("#contact-name").html(this.ContactName) $("#contact-number").html(this.ContactNumber) }); table, th, td { border: 1px solid black; border-collapse: collapse; } <table class="col-3 table tableforContact" id="contactinformation"> <thead> <tr> <td>Contact Name</td> <td>Contact Number</td> </tr> </thead> <tbody> <tr> <td id="contact-name"></td> <td id="contact-number"></td> </tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Puede iterar a través de la matriz de datos y agregar cada objeto a una fila:
const data = [{"ContactName": "45551134", "ContactNumber": "95011225"}]; const table = document.querySelector("#contactinformation"); const headers = table.querySelector("thead tr"); const body = table.querySelector("tbody"); // Create headers for (const key in data[0]) { const header = document.createElement("th"); header.innerText = key; headers.append(header); } // Create tbody rows data.forEach(obj => { // Create row const row = document.createElement("tr"); body.append(row); // Create row element for (const key in obj) { const value = document.createElement("td"); value.innerText = obj[key]; row.append(value); } }); <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <table class="col-3 table tableforContact" id="contactinformation"> <thead> <tr> </tr> </thead> <tbody> </tbody> </table>