Is there a more efficient way to populate table from object in Javascript?

Question

I'm hoping someone can show me a more efficient and far less verbose way of populating a table from an object. Or pointing out a much simpler way of storing data, so it's more easily accessible?

As you can see, my current way of doing it seems a little ridiculous. I'm a novice, and I can't find an easy way to do it with loops.

var rotaOb = {
  //It should have be able store staff
  staff: [{
      staff_staffN: 1234,
      staff_fName: "John",
      staff_sName: "Smith",
      staff_dept: "Cameras",
      staff_seniority: "senior",
      staff_fullTime: false,
      staff_pNumber: "+123 45678910",
      staff_sEmail: "john.smith@whotsit.com"
    }, 
    {
      staff_staffN: 2345,
      staff_fName: "John2",
      staff_sName: "Smith2",
      staff_dept: "Cameras",
      staff_seniority: "Junior",
      staff_fullTime: true,
      staff_pNumber: "+123 25678910",
      staff_sEmail: "john2.smith2@whotsit.com"
    },
    {
      staff_staffN: 3456,
      staff_fName: "John3",
      staff_sName: "Smith4",
      staff_dept: "Vision Mixers",
      staff_seniority: "Junior",
      staff_fullTime: true,
      staff_pNumber: "+123 35678910",
      staff_sEmail: "john3.smith3@whotsit.com"
    }],
};

var view = {
  displayStaff: function() {  // There must be a quicker way than this!?
    var staffInfo = document.getElementById("staffInfo");
    staffInfo.innerHTML = "";
    
    var headTR = document.createElement("TR");
    
    var headName = document.createElement("TH");
    var headPhone = document.createElement("TH");
    var headNum = document.createElement("TH");
    var headDept = document.createElement("TH");
    var headSenior = document.createElement("TH");
    var headEmail = document.createElement("TH");
    var headFullTime = document.createElement("TH");
    
    var headNameText = document.createTextNode("Staff Name");
    var headPhoneText = document.createTextNode("Phone Number");
    var headNumText = document.createTextNode("Staff Number");
    var headDeptText = document.createTextNode("Department");
    var headSeniorText = document.createTextNode("Seniority");
    var headEmailText = document.createTextNode("Email Address");
    var headFullTimeText = document.createTextNode("Employment Status");
    
    staffInfo.appendChild(headTR);
    
    headName.appendChild(headNameText);
    headTR.appendChild(headName);
    
    headPhone.appendChild(headPhoneText);
    headTR.appendChild(headPhone);
    
    headNum.appendChild(headNumText);
    headTR.appendChild(headNum);
    
    headDept.appendChild(headDeptText);
    headTR.appendChild(headDept);
    
    headSenior.appendChild(headSeniorText);
    headTR.appendChild(headSenior);
    
    headEmail.appendChild(headEmailText);
    headTR.appendChild(headEmail);
    
    headFullTime.appendChild(headFullTimeText);
    headTR.appendChild(headFullTime);
    

    for (var i = 0; i < rotaOb.staff.length; i++) {
      var staff = rotaOb.staff[i];
      
      var staffTR = document.createElement("TR");
      
      var staffTdName = document.createElement("TD");
      var staffTdPhone = document.createElement("TD");
      var staffTdNum = document.createElement("TD");
      var staffTdDept = document.createElement("TD");
      var staffTdSenior = document.createElement("TD");
      var staffTdEmail = document.createElement("TD");
      var staffTdFullTime = document.createElement("TD");
      
      var staffName = document.createTextNode(staff.staff_fName + " " + staff.staff_sName);
      var staffPhone = document.createTextNode(staff.staff_pNumber);
      var staffNum = document.createTextNode(staff.staff_staffN);
      var staffDept = document.createTextNode(staff.staff_dept);
      var staffSenior = document.createTextNode(staff.staff_seniority);
      var staffEmail = document.createTextNode(staff.staff_sEmail);
      var staffFullTime = document.createTextNode(staff.staff_fullTime);
      
      staffInfo.appendChild(staffTR);
      
      staffTdName.appendChild(staffName);
      staffTR.appendChild(staffTdName);
      
      staffTdPhone.appendChild(staffPhone);
      staffTR.appendChild(staffTdPhone);
      
      staffTdNum.appendChild(staffNum);
      staffTR.appendChild(staffTdNum);  
      
      staffTdDept.appendChild(staffDept);
      staffTR.appendChild(staffTdDept);
      
      staffTdSenior.appendChild(staffSenior);
      staffTR.appendChild(staffTdSenior);
      
      staffTdEmail.appendChild(staffEmail);
      staffTR.appendChild(staffTdEmail);
      
      staffTdFullTime.appendChild(staffFullTime);
      staffTR.appendChild(staffTdFullTime);
    }
  }
};

Answer 1

nnnnnnnnn's code example is decent but also look at how to do the same thing with document fragments (createDocumentFragment()).

Answer 2

There are a some methods that make using DOM tables easier:

createTHead();
insertRow();
insertCell();

and a couple more that you can check out here

using those the function looks like this:

funtion() {
    var table = document.createElement("TABLE");
    var header = table.creatTHead();
    var headerRow = head.insertRow(0);
    headrRow.insertCell(0).innerText("Staff Name");
    headrRow.insertCell(1).innerText("Phone Number");
    headrRow.insertCell(2).innerText("Staff Number");
    headrRow.insertCell(3).innerText("Department");
    headrRow.insertCell(4).innerText("Seniority");
    headrRow.insertCell(5).innerText("Email Address");
    headrRow.insertCell(6).innerText("Employment Status");

    for (var i = 0; i < rotaOb.staff.length; i++) {
        var staff = rotaOb.staff[i];

        var staffRow = table.instertRow(i+1);
        staffRow.insertCell(0).innerText(staff.staff_fName + " " + staff.staff_sName);
        staffRow.insertCell(1).innerText(staff.staff_pNumber);
        staffRow.insertCell(2).innerText(staff.staff_staffN);
        staffRow.insertCell(3).innerText(staff.staff_dept);
        staffRow.insertCell(4).innerText(staff.staff_seniority);
        staffRow.insertCell(5).innerText(staff.staff_sEmail);
        staffRow.insertCell(6).innerText(staff.staff_fullTime);
    }
}

Answer 3

You can make the JS code a lot shorter and simpler if you build the content of the table as a string of HTML, perhaps something like I've shown below.

Note that you should try to minimise the number of times you update the actual DOM, so build the string in a variable and then make one change to the table's .innerHTML at the end.

var view = {
  displayStaff: function() {
    var tableBodyHTML = "<tr><th>Staff Name</th><th>Phone Number</th><th>Staff Number</th><th>Department</th><th>Seniority</th><th>Email Address</th><th>Employment Status</th>";

    tableBodyHTML += rotaOb.staff.map(function(staff) {
      return "<tr><td>" + staff.staff_fName + " " + staff.staff_sName
           + "</td><td>" + staff.staff_pNumber
           + "</td><td>" + staff.staff_staffN
           + "</td><td>" + staff.staff_dept
           + "</td><td>" + staff.staff_seniority
           + "</td><td>" + staff.staff_sEmail
           + "</td><td>" + staff.staff_fullTime
           + "</td></tr>";
    }).join("");
		
    document.getElementById("staffInfo").innerHTML = tableBodyHTML;
  }
};

var rotaOb = {
  //It should have be able store staff
  staff: [{
      staff_staffN: 1234,
      staff_fName: "John",
      staff_sName: "Smith",
      staff_dept: "Cameras",
      staff_seniority: "senior",
      staff_fullTime: false,
      staff_pNumber: "+123 45678910",
      staff_sEmail: "john.smith@whotsit.com"
    },
    {
      staff_staffN: 2345,
      staff_fName: "John2",
      staff_sName: "Smith2",
      staff_dept: "Cameras",
      staff_seniority: "Junior",
      staff_fullTime: true,
      staff_pNumber: "+123 25678910",
      staff_sEmail: "john2.smith2@whotsit.com"
    },
    {
      staff_staffN: 3456,
      staff_fName: "John3",
      staff_sName: "Smith4",
      staff_dept: "Vision Mixers",
      staff_seniority: "Junior",
      staff_fullTime: true,
      staff_pNumber: "+123 35678910",
      staff_sEmail: "john3.smith3@whotsit.com"
    }]
};

view.displayStaff();

<table id="staffInfo"></table>

Note that the principle of minimising updates to the DOM also applies if you go the .createElement() way of your original code. That is, don't append a dynamically created row to the table until after adding the cells to the row.