[英]How to Format JSON data into two html table
我目前正在接收 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
})
你缺少一些东西。 1. 不需要为每个学生项目添加表格元素 2. 你错过了添加表头 3. ${ele}
是一个 object,你需要为 studentId 和 Grade 打印两个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>
我建议为此使用一些模板引擎。 例如:小胡子、车把等。如果您必须为不同的事情这样做,它会让您的生活更轻松
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.