Estoy escribiendo una función que muestra datos json de una API REST en una tabla. Mis datos se parecen a los datos a continuación. Actualmente recibo un error indefinido. ¿Cómo puedo llenar mi tabla con estos datos? No estoy muy familiarizado con las tablas, y mi confusión se debe a cómo iterar y luego agregar mis datos a los elementos creados.
Const data = [{ name: "Adam", age: 10, }, { name: "Suzy", age: 9, }, { name: "wilson", age: 6, }, { name: "nelson", age: 5, }, { name: "hinny", age: 2, } ]; // This is what I have: const displayTable = (data) => { const table = document.createElement('table'); const tbl = document.createElement('table'); const thead = document.createElement('thead'); const tb = document.createElement('tbody'); const tr = document.createElement('tr'); const th = document.createElement('th'); const td = document.createElement('td'); const name = data.map(function(e) { return e.name; }); const age = data.map(function(e) { return e.age; }); tr.innerHTML = name; tr.innerHTML = age thead.appendChild(tr) tbody.appendChild(tr) table.appendChild(tr) };
Estoy tratando de lograr algo como la tabla a continuación con la línea vertical y todo: