Question

我目前正在一个网站上，该网站导入JSON数据并在HTML中填充表格。
我在遍历数组以显示表中的所有数据时遇到麻烦。当前，表中仅显示一些JSON数据，而其他数据仅以文本形式显示在表外。

我尝试将JSON数据中的键用作表头，但是我只需要选择几个头即可。

var table =
  { "Employees": 
    [ { "Started"   : "2016"
      , "Department": "Engineering"
      , "Employee": 
        [ { "id": "a101", "firstname": "Alan",  "surname": "Arkin"  } 
        , { "id": "a102", "firstname": "Geoff", "surname": "keegan" } 
        ] 
      } 
    , { "Started"   : "2016"
      , "Department": "R&D"
      , "Employee": 
        [ { "id": "a103", "firstname": "Michele", "surname": "Jones" } 
        , { "id": "a104", "firstname": "Peter",   "surname": "Smith" } 
        ] 
      } 
    ] 
  } 

var Employees = table.Employees


// This code iterates through the colorArray and writes html code to put the color information in a table.
var colorInfo = "<table>";
colorInfo += "<tr><th>Started</th><th>Department</th><th>ID</th><th>Name</th></tr>";
for (var i = 0; i < Employees.length; i++) {
    var started = Employees[i].Started;
    var Department = Employees[i].Department;
    var EmployeeArray = Employees[i].Employee;

    for (var j = 0; j < EmployeeArray.length; j++) {

        var Emp = EmployeeArray[j]
        var id = Emp.id
        var names = Emp.firstname + " " + Emp.surname

        colorInfo += "<tr><td>" + started + "</td><td>" + Department + "</td><td>" + id + "</td><td>" + names + "</td></tr>";

    }
    // Close the table element.
    colorInfo += "</table>";

    // Add the new html code to the div element with id = 'id01'.
    document.getElementById("id01").innerHTML = colorInfo;
}

body  { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
Table { border-collapse: collapse; }
td    { border: 1px solid grey; padding: 2px 10px; }
th { background-color: turquoise;}

<div id="id01">...</div>

我希望所有数据都应出现在表格中 here.

Answer 1

请勿使用.innerHTML方法，这是遇到问题的最佳方法。有许多方法可以在javascript中创建DOM，这不仅可以简化解释程序，还可以在正确的位置自动关闭每个标签，并加快代码执行速度。

.innerHTML是恶魔！（并且对于简单的文本内容，更喜欢使用.textContent）

示例：

const table =
  { "Employees": 
    [ { "Started"   : "2016"
      , "Department": "Engineering"
      , "Employee": 
        [ { "id": "a101", "firstname": "Alan",  "surname": "Arkin"  } 
        , { "id": "a102", "firstname": "Geoff", "surname": "keegan" } 
        ] 
      } 
    , { "Started"   : "2016"
      , "Department": "R&D"
      , "Employee": 
        [ { "id": "a103", "firstname": "Michele", "surname": "Jones" } 
        , { "id": "a104", "firstname": "Peter",   "surname": "Smith" } 
        ] 
      } 
    ] 
  } 

let MyTable = document
                .querySelector('#id01')
                .appendChild(document.createElement('table'))

for (let StartDep of table.Employees)
  {
  for (let Employee of StartDep.Employee )
    {
    let nRow = MyTable.insertRow(-1)
      , rCell  = 0
    nRow.insertCell(rCell++).textContent = StartDep.Started
    nRow.insertCell(rCell++).textContent = StartDep.Department
    nRow.insertCell(rCell++).textContent = Employee.id
    nRow.insertCell(rCell++).textContent = `${Employee.firstname} ${Employee.surname}`
    }
  }

let Rowhead = MyTable.createTHead().insertRow(-1)

'Started,Department,ID,Name'.split(',')
  .forEach((T,i)=>Rowhead.insertCell(i).textContent=T)

body  { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
Table { border-collapse: collapse; }
td    { border: 1px solid grey; padding: 2px 10px; }
thead { background-color: turquoise;}

<div id="id01"></div>

Answer 2

您的表无法正确显示，因为在第一个Employees for循环中有“ close table element”和“ add to div element”语句。将这些移动到循环之外，它将起作用。

如何使用JavaScript的JSON数据创建HTML表

2 个答案: