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

Question

I'm currently receiving JSON data and want to format it into a table using javascript and html. Any help is appreciated.

The JSON data I receive after a fetch request looks like this:

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

This is how I want the table to formatted:

    <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>

Here is how my code currently looks:

    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

You are missing few things. 1. No need to add table element for each student item 2. You missed to add the headers 3. ${ele} is an object, you need to print two td s for studentId and grade

 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

I would suggest using some templating engines for that. ex: Mustache, Handlebars etc. It makes your life easier if you have to do this for different things