如何将JSON数据格式化为两个html表

Question

我目前正在接收JSON数据，并希望使用javascript和html将其格式化为一个表。感谢您的帮助。

在获取请求后，我收到的JSON数据如下所示：

{
"results": [
{
"studentId": "Damien.Hammes93",
"score": 0.778678577215454
},
{
"studentId": "Beverly56",
"score": 0.7879353094963757
},
{
"studentId": "Tyshawn37",
"score": 0.723347659626473
},
]
}

这就是我希望表格格式化的方式：

<table>
<tr>
<th>Student ID</th>
<th>Grade</th> 
</tr>
<tr>
<td>Damien.Hammes93</td>
<td>0.778678577215454</td>
</tr>
<tr>
<td>Beverly56</td>
<td>0.7879353094963757</td>
</tr>
<tr>
<td>Tyshawn37</td>
<td>0.723347659626473</td>
</tr>
</table>

以下是我的代码当前的样子：

window.addEventListener('load', async() => {
const studentsTableTag = document.getElementById("studentsTable");
// studentsTableTag selects the student <table>

const studentsData = await receivesExamOrStudentData(enpoints['students']);
//studentsData returns the students JSON listed above
const studentsTable = (ele) => {
let html = `<table><tr>`;
html += `<td id="studentID" > ${ele} </td>`;
html += `</tr></table>`;
return html
}
const htmlStudents = studentsData.map(student =>
`<tr>${studentsTable(student)}</tr>`
).join('')
studentsTableTag.innerHTML = htmlStudents
})

Answer 1

您缺少了一些东西。1.无需为每个学生项目添加表格元素2.你没有添加标题3.${ele}是一个对象，您需要为studentId和等级打印两个td

window.addEventListener('load', async () => {
const studentsTableTag = document.getElementById("studentsTable");
// studentsTableTag selects the student <table>
const studentsData = {
"results": [{
"studentId": "Damien.Hammes93",
"score": 0.778678577215454
},
{
"studentId": "Beverly56",
"score": 0.7879353094963757
},
{
"studentId": "Tyshawn37",
"score": 0.723347659626473
},
]
}
//studentsData returns the students JSON listed above
const studentsTable = (ele) => {
let html = ``;
html += `<td class="studentID" > ${ele.studentId} </td>`;
html += `<td class="score" > ${ele.score} </td>`;
return html
}
const htmlStudents = studentsData.results.map(student =>
`<tr>${studentsTable(student)}</tr>`
).join('')
studentsTableTag.innerHTML = '<tr><th>Student ID</th><th>Grade</th></tr>' + htmlStudents;
})

<table id="studentsTable"></table>

Answer 2

我建议使用一些模板引擎。例如：Mustache、Handlebars等。如果你必须为不同的事情做这件事，会让你的生活更轻松