Create HTML table from object

Question

I have an object:

{ 
 type : "consultations/get",
 payload : [
   {name : "bob",
    favoriteColor : "blue",
    age : 54},
   {name : "steve"
    favoriteColor : "red"
    age : 45},
    {name : "sarah",
    favoriteColor : "green",
    age : 38}
 ] 
}

How can I take name and favoriteColor key and value and map to a html table? I do not want to display age and I would like to be able to set which rows (payload keys) are shown (i.e favoriteColor and name) and have the corresponding values mapped to a table cell. Any help would be appreciated. Thank you in advance. Here is the approach I have taken thus far:

var json = {
 type : "consultations/get",
 payload : [
   {name : "bob",
    favoriteColor : "blue",
    age : 54},
   {name : "steve",
    favoriteColor : "red",
    age : 45},
    {name : "sarah",
    favoriteColor : "green",
    age : 38}
 ] 
};

var tableHeader = `
${Object.keys(json.payload[0]).filter(e => e !== "age").map((row) => `
<th>${row}</th>`).join('')}`;

The tableHeader comes out fine, I'm just stuck on how I can filter and map the data. After making the tableHeader would I just loop through the payload and add the td's accordingly? How can I do this properly with the particular filter I have placed on the keys?

See here (pure JS): stackoverflow.com/questions/30464675/… or here (jQuery): geeksforgeeks.org/… — AbsoluteBeginner
– AbsoluteBeginner, Commented Jan 18, 2021 at 19:09

Aalexander · Accepted Answer · 2021-01-18 19:07:45Z

0

You can build a table string with your data and insert it inside your html

const data = {
    type : "consultations/get",
    payload : [
      {name : "bob",
       favoriteColor : "blue",
       age : 54},
      {name : "steve",
       favoriteColor : "red",
       age : 45},
       {name : "sarah",
       favoriteColor : "green",
       age : 38}
    ] 
   }
   
   
   let table = "<table><thead><tr><th>Name</th><th>Fav Color</th></thead><tbody>"
   
   data.payload.forEach((x, ind) => {
   console.log("Here the corresponding row" +(ind+1))
   table += `<tr><td>${x.name}</td><td>${x.favoriteColor}</td></tr>`
   })
   
   table += "</tbody></table>"
   
   document.getElementById("tab").innerHTML = table;

<div id="tab"></div>

answered Jan 18, 2021 at 19:07

Aalexander

4,9843 gold badges13 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfvc · Accepted Answer · 2021-01-18 19:46:19Z

Try this:

const response = { 
  type: "consultations/get",
  payload: [
    {
      name: "bob",
      favoriteColor: "blue",
      age: 54,
    },
    {
      name: "steve",
      favoriteColor: "red",
      age: 45,
    },
    {
      name: "sarah",
      favoriteColor: "green",
      age: 38,
    },
  ],
};

const keysToShow = {
  name: true,
  favoriteColor: true,
  age: false,
}

const keys = Object.keys(keysToShow);

const generateTable = () => {
  const body = document.querySelector('body');
  const table = document.createElement('table');
  
  addTableHead(table);
  addTableRows(table);
  
  body.appendChild(table);
}

const addTableHead = (table) => {
  const tableRow = document.createElement('tr');
  
  keys.forEach((key) => {
    if (keysToShow[key]) {
      addTableCell(tableRow, key, 'th');
    }
  });
  
  table.appendChild(tableRow);
}

const addTableRows = (table) => {
  response.payload.forEach((item) => {
    const tableRow = document.createElement('tr');
    
    keys.forEach((key) => {
      if (keysToShow[key]) {
        addTableCell(tableRow, item[key]);
      }
    });
    
    table.appendChild(tableRow);
  });
}

const addTableCell = (tableRow, content, type = 'td') => {
  const tableCell = document.createElement(type);
  const tableCellContent = document.createTextNode(content);
  tableCell.appendChild(tableCellContent);
  tableRow.appendChild(tableCell);
} 

document.querySelector('#generate').addEventListener('click', generateTable);

<button id="generate">Generate Table</table>

Collectives™ on Stack Overflow

Create HTML table from object

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related