Comment formater les données JSON en deux tables html

Question

Je reçois actuellement des données JSON et je souhaite les formater dans un tableau à l'aide de javascript et html. Toute aide est appréciée.

Les données JSON que je reçois après une demande de récupération ressemblent à ceci:

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

Voici comment je veux que le tableau soit formaté:

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

Voici à quoi ressemble actuellement mon code:

    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

    })

javascript html json

0

bruce 4 nov. 2019 à 06:47

Answer 1

Je suggère d'utiliser des moteurs de modèles pour cela. ex: moustache, guidon, etc. Cela vous facilite la vie si vous devez le faire pour différentes choses

-1

Aditya 4 nov. 2019 à 04:25

Answer 2

Vous manquez peu de choses. 1. Pas besoin d'ajouter d'élément de table pour chaque élément étudiant 2. Vous avez manqué d'ajouter les en-têtes 3. ${ele} est un objet, vous devez imprimer deux td pour studentId et 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>

4

Vineesh 4 nov. 2019 à 04:01

Comment formater les données JSON en deux tables html

2 réponses

De nouvelles questions

javascript