0

Hola tengo un problema al llenar una tabla me sale undefined al querer mostrar los datos el que arroja el json en la tabla...

El json que tengo es el siguiente

{
"calificaciones": {
"1": {
"nombre_materia": "Matematicas ",
"semestre": "1",
"par1": "9",
"par2": "7",
"par3": "8",
"calif_final": "6"
},
"2": {
"nombre_materia": "INFORMÁTICA I",
"semestre": "1",
"par1": "9",
"par2": "8",
"par3": "5",
"calif_final": "6"
 }
},
"promedio_final": "6.20",
"promedio_p1": 12,
"promedio_p2": 11.8,
"promedio_p3": 8.8
}

La tabla html que tengo es la siguiente la cual lleno con el json y en la cual el body sale undefined

<table id="table" class="table">
            <thead>
                <tr>
                    <th>Materia</th>
                    <th>Semestre</th>
                    <th>Parcial 1</th>
                    <th>Parcial 2</th>
                    <th>Parcial 3</th>
                    <th>Calificacion Final</th>
                </tr>
            </thead>
            <tbody id="tbodyProducto">

            </tbody>

El ajax que utilizo para llenar el body de la tabla es el siguiente creo que es el equivocado pero no se en que parte me e equivocado ya que en la consola me arroja el json donde si lo va a traer a la url

 $.ajax({
    url: 'calificaciones.php',
    type: 'POST',
    dataType: 'json',
    data: {matricula: '112020',ciclo:'2018-2019'},
    success: function(response) {
        var valor = '<tr>' +
        '<td>' + response.calificaciones.nombre_materia + '</td>' +
        '<td>' + response.calificaciones.semestre + '</td>' +
        '<td>' + response.calificaciones.parcial1 + '</td>' +
        '<td>' + response.calificaciones.parcial2 + '</td>' +
        '<td>' + response.calificaciones.parcial3 + '</td>' +
        '<td>' + response.calificaciones.calif_final + '</td>' +
        '</tr>';
        $("#tbodyProducto").html(valor);
    }
});
4
  • Necesitas parsear tu response con JSON.parse(), para convertir tu JSON en un objeto y poder utilizarlo. Commented el 24 sept. 2019 a las 20:42
  • si coloco json.parse(response); me marca el siguiente error VM843:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>)
    – JV93
    Commented el 24 sept. 2019 a las 20:50
  • tiene que ser con mayusculas la palabra JSON, así JSON.parse(response) Commented el 24 sept. 2019 a las 20:53
  • Revisa bien el archivo calificaciones.php pues en él no debe haber ninguna salida por pantalla que no sea el JSON. Ese error hace pensar que estás imprimiendo otras cosas.
    – A. Cedano
    Commented el 24 sept. 2019 a las 20:53

2 respuestas 2

1

Como por lo visto tu clave es un string "0", "1", "2"; con un foreach puede recorrerlo, y como veo que quieres pintar una tabla te recomiendo appendTo

$.ajax({
    url: 'calificaciones.php',
    type: 'POST',
    dataType: 'json',
    data: {matricula: '112020',ciclo:'2018-2019'},
    success: function(response) {
        $("#tbodyProducto").html('');
        $.each(response.calificaciones, function(index, item){
           var valor = 
            '<tr>' +
              '<td>' + item.nombre_materia + '</td>' +
              '<td>' + item.semestre + '</td>' +
              '<td>' + item.parcial1 + '</td>' +
              '<td>' + item.parcial2 + '</td>' +
              '<td>' + item.parcial3 + '</td>' +
              '<td>' + item.calif_final + '</td>' +
            '</tr>';
            $(valor).appendTo("#tbodyProducto");
        });
        
        $("#tbodyCalificaciones").html('');
         var valor = 
          '<tr>' +
            '<td>' + response.promedio_final + '</td>' +
            '<td>' + response.promedio_p1 + '</td>' +
            '<td>' + response.promedio_p2 + '</td>' +
            '<td>' + response.promedio_p3 + '</td>' +
          '</tr>';
        $(valor).appendTo("#tbodyCalificaciones");
    }
});

5
  • siegue apareciendo undefined @gabriel jeremy
    – JV93
    Commented el 24 sept. 2019 a las 22:55
  • era response.calificaciones ya corregui la respuesta. te deberia funcionar Commented el 25 sept. 2019 a las 13:11
  • si ya me funciono una duda mas al querer imrimir "promedio_final": "6.20", "promedio_p1": 12, "promedio_p2": 11.8, "promedio_p3": 8.8 en otra tabla me lo imprime dos veces sabes por que razon?
    – JV93
    Commented el 25 sept. 2019 a las 15:03
  • porque esos son atributos del objeto y tienes que hacerlos por separado, edito la respuesta Commented el 25 sept. 2019 a las 15:33
  • @GabrielJeremyRodriguezRiver eres un crack, gracias por tu aporte
    – Oscar
    Commented el 24 ene. 2022 a las 19:19
0

Parese que intentas imprimir las cualificaciones directamente response.calificaciones.nombre_materia Y el archivo json que muestras seria response.calificaciones.1.nombre_materia fijate en la estructura del json

{
    "calificaciones": {
        "1": {
            "nombre_materia": "Matematicas ",
            "semestre": "1",
            "par1": "9",
            "par2": "7",
            "par3": "8",
            "calif_final": "6"
        },
        "2": {
            "nombre_materia": "INFORMÁTICA I",
            "semestre": "1",
            "par1": "9",
            "par2": "8",
            "par3": "5",
            "calif_final": "6"
        }
    },
    "promedio_final": "6.20",
    "promedio_p1": 12,
    "promedio_p2": 11.8,
    "promedio_p3": 8.8
}

Puedes hacer un loop para imprimir las calificaciones con

for (let i = 0; i < response.calificaciones.length; i++) {
  console.log(response.calificaciones[i].nombre_materia)
}
1
  • Puede que response.calificaciones[i].nombre_materia no funcione ya que en el json el 1 y 2 son cadenas de caracteres (String) y el valor de i es un entero (Integer)
    – kcurtet
    Commented el 24 sept. 2019 a las 22:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.