Programmatically insert headers to a table

Question

Programmatically insert headers to a table

I have successfully retrieved JSON data and programmatically added them to a table. However, I am facing an issue with adding the table headers programmatically. You can run the code below to see it in action. If you want to test it out, feel free to do so by clicking on this running LINK Codepen Code

function search() {
    var queryURL = "https://jsonplaceholder.typicode.com/users";

    fetch(queryURL)
            .then(response=> response.json())
            .then(data=>displayUsersAsATable(data))
               .catch(function (error) {
                console.log('Error during fetch: ' + error.message);
            });
}

function displayUsersAsATable(data) {
 
    var usersDiv = document.querySelector("#users");
    usersDiv.innerHTML = "";

    // creates and populate the table with users
    var table = document.createElement("table");

    data.forEach(function (currentUser) {
  
      var myhead = table.createTHead();
      myhead.innerHTML = "Table Heading"
      
      var mycaption = table.createCaption();
        mycaption.innerHTML = "Table Caption"
  
        var row = table.insertRow();
        var nameCell = row.insertCell();
        nameCell.innerHTML = currentUser.email;
        var cityCell = row.insertCell();
        cityCell.innerHTML = currentUser.address.city;
    });
    
        // adds the table to the div
        usersDiv.appendChild(table);
    }

javascript json foreach html-table

Answer 1

Answer №1

According to this source, the table API method insertCell cannot be used to insert <th> tags in HTML. However, this can be achieved programmatically by creating the element using document.createElement and then inserting it.

In the code snippet provided, the creation of table headers is within a loop which could result in multiple headers being created for each piece of data. To address this, I have placed the header creation outside the loop assuming this was the intended behavior.

Here is a related code excerpt:

var myhead = table.createTHead();
var headRow = myhead.insertRow();
var emailHead = document.createElement('th');
var nameHead = emailHead.cloneNode();
headRow.appendChild(emailHead);
headRow.appendChild(nameHead);
emailHead.innerHTML = 'Email';
nameHead.innerHTML = 'Name';

Check out a working demo below:

function search() {
var queryURL = "https://jsonplaceholder.typicode.com/users";

fetch(queryURL)
            .then(response=> response.json())
             //arrow function by Mauro - works fine!
            .then(data=>displayUsersAsATable(data))
               .catch(function (error) {
                console.log('Error during fetch: ' + error.message);
            });
}

//questa è una variazione

function displayUsersAsATable(data) {
// users is a JavaScript object

// empty the div that contains the results
var usersDiv = document.querySelector("#users");
usersDiv.innerHTML = "";

// create and populate the table with users
var table = document.createElement("table");
var mycaption = table.createCaption();
mycaption.innerHTML = "Table Caption"

//Creating and populating table header.
var myhead = table.createTHead();
var headRow = myhead.insertRow();
var emailHead = document.createElement('th');
var nameHead = emailHead.cloneNode();
headRow.appendChild(emailHead);
headRow.appendChild(nameHead);
emailHead.innerHTML = 'Email';
nameHead.innerHTML = 'Name';

var tableBody = table.createTBody();

// iterate on the array of users
data.forEach(function (currentUser) {
//inserimento dei titoli della colonna programmaticamente
   // creates a row
   var row = tableBody.insertRow();
   // insert cells in the row
   var nameCell = row.insertCell();
   nameCell.innerHTML = currentUser.email;
   var cityCell = row.insertCell();
   cityCell.innerHTML = currentUser.address.city;
});

// adds the table to the div
usersDiv.appendChild(table);
}

table {
  margin-top: 20px;
}
table, tr, td {
  border: 1px solid;
background-color: rgb(200, 200, 100);
}

<head>
<title>Working with remote data</title>
  <meta charset="utf-8"/>
  <!-- Polyfill in case your browser does not support the fetch API -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/0.10.1/fetch.js"></script>

</head>
<body>
  <button onclick="search();">Get remote list of users' names and emails using the fetch API</button>
  <div id="users"></div>
</body>

Answer 2

According to this source, the table API method insertCell cannot be used to insert <th> tags in HTML. However, this can be achieved programmatically by creating the element using document.createElement and then inserting it.

In the code snippet provided, the creation of table headers is within a loop which could result in multiple headers being created for each piece of data. To address this, I have placed the header creation outside the loop assuming this was the intended behavior.

Here is a related code excerpt:

var myhead = table.createTHead();
var headRow = myhead.insertRow();
var emailHead = document.createElement('th');
var nameHead = emailHead.cloneNode();
headRow.appendChild(emailHead);
headRow.appendChild(nameHead);
emailHead.innerHTML = 'Email';
nameHead.innerHTML = 'Name';

Check out a working demo below:

function search() {
var queryURL = "https://jsonplaceholder.typicode.com/users";

fetch(queryURL)
            .then(response=> response.json())
             //arrow function by Mauro - works fine!
            .then(data=>displayUsersAsATable(data))
               .catch(function (error) {
                console.log('Error during fetch: ' + error.message);
            });
}

//questa è una variazione

function displayUsersAsATable(data) {
// users is a JavaScript object

// empty the div that contains the results
var usersDiv = document.querySelector("#users");
usersDiv.innerHTML = "";

// create and populate the table with users
var table = document.createElement("table");
var mycaption = table.createCaption();
mycaption.innerHTML = "Table Caption"

//Creating and populating table header.
var myhead = table.createTHead();
var headRow = myhead.insertRow();
var emailHead = document.createElement('th');
var nameHead = emailHead.cloneNode();
headRow.appendChild(emailHead);
headRow.appendChild(nameHead);
emailHead.innerHTML = 'Email';
nameHead.innerHTML = 'Name';

var tableBody = table.createTBody();

// iterate on the array of users
data.forEach(function (currentUser) {
//inserimento dei titoli della colonna programmaticamente
   // creates a row
   var row = tableBody.insertRow();
   // insert cells in the row
   var nameCell = row.insertCell();
   nameCell.innerHTML = currentUser.email;
   var cityCell = row.insertCell();
   cityCell.innerHTML = currentUser.address.city;
});

// adds the table to the div
usersDiv.appendChild(table);
}

table {
  margin-top: 20px;
}
table, tr, td {
  border: 1px solid;
background-color: rgb(200, 200, 100);
}

<head>
<title>Working with remote data</title>
  <meta charset="utf-8"/>
  <!-- Polyfill in case your browser does not support the fetch API -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/0.10.1/fetch.js"></script>

</head>
<body>
  <button onclick="search();">Get remote list of users' names and emails using the fetch API</button>
  <div id="users"></div>
</body>

Programmatically insert headers to a table

Answer №1

Similar questions

Issues with React's complex nested components not functioning properly

What offers better performance: XmlHttpRequest response in HTML or JSON format?

Populate an HTML table with the days of the month and corresponding dates retrieved from a PostgreSQL database using JavaScript

Ajax cannot seem to come to a resolution

Styling Material UI height in select elements (React)

Issue with radio button click event not triggering

Delete a specific element based on its class by utilizing the parent() method

A guide on cycling through partitions in SQL, selectively gathering rows from a designated week, and generating a fresh table containing the captured data

AngularJS: Implementing a toggle click function for a list of items within an iframe

Step-by-step guide on populating input fields with JSON data for each row

Passing the v-model property from a child component to a parent in VueJS

The act of initiating a new server on cPanel is resulting in a 503 service unavailability

Highlighting JavaScript code with React Syntax Highlighter exclusively

Identifying if a function is within the prototype chain of a class instance in ES6

Combining hover and mousedown event listeners in jQuery: Tips and tricks

Is there a way to target a button within an anchor tag without relying on a specific id attribute?

What is the best way to delete a document and all of its nested documents in MongoDB?

"Vue component inputs fail to update when used in the same instance

Dealing with Errors in the Body of REST Requests with Spring WebClient

JavaScript Vanilla | Object that can be invoked and also has a property