Question

0

583

Views

Populate 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:

about 4 years ago · Juan Pablo Isaza

Answer question

0

583

Populate Table with JSON Data - Vanilla JavaScript

Find remote jobs

Andres GPT