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

Question

I am currently working on a website that imports JSON data and populates a table within HTML.
I am having trouble iterating through the arrays to show all of the data in the table. Currently, only some of the JSON data appears in the table while the other data is just shown as text outside the table.

I have tried using the keys from the JSON data as table headers but I only require a select few headers.

 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>

I expect that all of the data should appear in the table here.

Answer 1

Do not use the .innerHTML method, it is the best way to have problems. There are many ways to create DOM in javascript, which in addition simplifies the interpreter, close automatically each tags on the right place and gives faster code execution.

.innerHTML is a devil ! (and prefer .textContent for simple text contents)

example:

 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

Your table isn't displaying properly because you have the 'close table element' and 'add to div element' statements inside the first Employees for-loop. Move those outside the loop and it will work.