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
})
0
bruce
4 nov. 2019 à 06:47
2 réponses
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
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