Dynamically generating HTML tables with JavaScript using backend data

Other Questions JavaScript
1

Hey everyone! I’m trying to figure out how to make an HTML table using JavaScript. The tricky part is that the data for the table cells will come from the backend. I’ve got a basic structure in mind, but I’m not sure how to populate it dynamically.

Here’s a sample of what I’m aiming for:

let tableData = [
  { username: 'Alice', manager: 'Bob', imei: '123456789', email: '[email protected]', gps: '40.7128,-74.0060' },
  { username: 'Charlie', manager: 'Dave', imei: '987654321', email: '[email protected]', gps: '34.0522,-118.2437' }
];

function createTable(data) {
  // Need help here to generate the table
}

createTable(tableData);

I want to create a function that takes this data and builds a table with headers for Username, Manager, IMEI, Email, GPS, and Actions. Each row should have an ‘Edit’ button too.

Any ideas on how to approach this? Thanks in advance!

2

hey swiftcoder, i can help with that! here’s a quick way to generate ur table:

function createTable(data) {
  let table = '<table><tr><th>Username</th><th>Manager</th><th>IMEI</th><th>Email</th><th>GPS</th><th>Actions</th></tr>';
  data.forEach(row => {
    table += `<tr><td>${row.username}</td><td>${row.manager}</td><td>${row.imei}</td><td>${row.email}</td><td>${row.gps}</td><td><button>Edit</button></td></tr>`;
  });
  table += '</table>';
  document.body.innerHTML = table;
}

this should do the trick! let me know if u need more help

3

I’d suggest a slightly different approach that separates table creation and insertion:

function createTable(data) {
    const table = document.createElement('table');
    const headers = ['Username', 'Manager', 'IMEI', 'Email', 'GPS', 'Actions'];
    
    const headerRow = table.insertRow();
    headers.forEach(text => {
        const th = document.createElement('th');
        th.textContent = text;
        headerRow.appendChild(th);
    });

    data.forEach(row => {
        const tr = table.insertRow();
        Object.values(row).forEach(value => {
            const td = tr.insertCell();
            td.textContent = value;
        });
        const actionCell = tr.insertCell();
        const editButton = document.createElement('button');
        editButton.textContent = 'Edit';
        editButton.onclick = () => handleEdit(row);
        actionCell.appendChild(editButton);
    });

    return table;
}

const tableElement = createTable(tableData);
document.body.appendChild(tableElement);

function handleEdit(row) {
    console.log('Editing:', row);
    // Implement edit functionality here
}

This method gives you more control over table structure and allows for easier event handling.

4

I’ve tackled a similar challenge recently, and here’s what worked for me:

function createTable(data) {
  const table = document.createElement('table');
  const thead = table.createTHead();
  const headerRow = thead.insertRow();
  
  ['Username', 'Manager', 'IMEI', 'Email', 'GPS', 'Actions'].forEach(header => {
    const th = document.createElement('th');
    th.textContent = header;
    headerRow.appendChild(th);
  });

  const tbody = table.createTBody();
  data.forEach(item => {
    const row = tbody.insertRow();
    Object.values(item).forEach(value => {
      const cell = row.insertCell();
      cell.textContent = value;
    });
    const actionCell = row.insertCell();
    const editBtn = document.createElement('button');
    editBtn.textContent = 'Edit';
    editBtn.onclick = () => editRow(item);
    actionCell.appendChild(editBtn);
  });

  return table;
}

function editRow(item) {
  // Implement edit logic here
  console.log('Editing:', item);
}

document.body.appendChild(createTable(tableData));

This approach creates a table programmatically, which I find more flexible than string concatenation. It also separates the table creation from DOM insertion, making it easier to work with the table structure if needed.