0
585
VistasPopulate Table with JSON Data - Vanilla JavaScript
I am writing a function that displays a json data from a REST API in a table. My data looks like the data below. I am currently getting undefined error. How Can I populate my table with this data? I am not too familiar with tables, and my confusion comes with how to iterate and then to append my data to the created elements.
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)
};I am trying to achieve something like the table below with the vertical line and all:
·
Juan Pablo Isaza
Responde la pregunta