Write multiple values from json file into HTML table with Javascipt

Issue

Heyy!

I have a small problem and I am still a beginner. That’s why I haven’t found a solution yet. ^^

There is a json file with multiple values. I would like to write the values from the file into an HTML table with Javascript (not php!).


Here is an example:

Json File:

{
   "628e191673ae8f7750c62fce": {
     "name": "John",
     "surname": "Smith",
     "age": "24"
   },
   "628e1fd0d27981c6250d886c": {
     "name": "Fred",
     "surname": "Bloggs",
     "age": "32"
   },
   "628e20c805f38641bdc08d7d": {
     "name": "Joe",
     "surname": "Harris",
     "age": "27"
   }
}

The table should then look like this:

Name Surname Age
John Smith 24
Fred Bloggs 32
Joe Harris 27

What is the best way for me to do this with Javascript?
Thank you in advance. 🙂

Solution

You can break down the code into little bite-sized functions that build up the table row-by-row creating HTML strings along the way, and then adding them to the DOM.

const data = {"628e191673ae8f7750c62fce":{name:"John",surname:"Smith",age:"24"},"628e1fd0d27981c6250d886c":{name:"Fred",surname:"Bloggs",age:"32"},"628e20c805f38641bdc08d7d":{name:"Joe",surname:"Harris",age:"27"}};

// Returns a simple cell
function getCell(data) {
  return `<td>${data}</td>`;
}

// Returns an string of cells HTML
// `map` returns an array so we need to `join`
// the elements together
function getRow(data) {
  return data.map(getCell).join('');
}

// Returns a set of rows by `mapping`
// over the values of each object, and creating
// a new row for each object
function getRows(data) {
  return data.map(obj => {
    const values = Object.values(obj);
    return `<tr>${getRow(values)}</tr>`;
  }).join('');
}

// Get the object values from the data
const objs = Object.values(data);

// Get the keys from the first object of `objs`.
// This way we don't have to hard-code the headings
// in the HTML markup
const headers = Object.keys(objs[0]);

// Construct a table using the functions
const table = `
<table>
  <tbody>
    <tr class="headings">${getRow(headers)}</tr>
    ${getRows(objs)}
  </tbody>
</table>
`

// Add everything to a container
document.body.insertAdjacentHTML('beforeend', table);
table { border-collapse: collapse; border: 1px solid #454545; width: 300px;}
.headings { background-color: #efefef; font-weight: 600; text-transform: capitalize; }
td { padding: 0.3em; border: 1px solid #efefef;}

Additional documentation

Answered By – Andy

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.