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

我目前正在接收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

    })
exchange456 回答:如何将JSON数据格式化为两个html表

您缺少一些东西。 1.无需为每个学生项目添加表格元素 2.您错过了添加标题 3. ${ele}是一个对象,您需要打印两个td作为StudentId和成绩

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>

,

我建议为此使用一些模板引擎。例如:小胡子,把手等。如果您需要为其他事情做的话,这会使您的生活更轻松

本文链接:https://www.f2er.com/3169200.html

大家都在问