Cómo formatear datos JSON en dos tablas html

Question

Actualmente estoy recibiendo datos JSON y quiero formatearlos en una tabla usando javascript y html. Cualquier ayuda es apreciada.

Los datos JSON que recibo después de una solicitud de captura tienen este aspecto:

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

Así es como quiero que la tabla formatee:

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

Así es como se ve actualmente mi código:

    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 a las 06:47

Answer 1

Sugeriría usar algunos motores de plantillas para eso. Ej .: bigote, manillar, etc. Te hace la vida más fácil si tienes que hacer esto por diferentes cosas

-1

Aditya 4 nov. 2019 a las 04:25

Answer 2

Te faltan algunas cosas. 1. No es necesario agregar un elemento de tabla para cada elemento del alumno 2. Olvidaste agregar los encabezados 3. ${ele} es un objeto, debe imprimir dos td s para studentId y 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 a las 04:01

Cómo formatear datos JSON en dos tablas html

2 respuestas

Nuevas preguntas

javascript