如何將 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}是一個 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>

Answer 2

我建議為此使用一些模板引擎。 例如：小胡子、車把等。如果您必須為不同的事情這樣做，它會讓您的生活更輕松