0

Tengo el siguiente objeto JSON y quisiera mostrarlo en una tabla HTML:

 {  
    "data":[  
       {  
          "0":"328",
          "tr_id":"328",
          "1":"USE",
          "tr_oficina":"USE",
          "2":"4",
          "num_oficina":"4",
          "3":"1",
          "tr_turno":"1",
          "4":"2018-02-28 21:04:25",
          "tr_fecha":"2018-02-28 21:04:25",
          "5":"00:00:03",
          "tr_cronometro":"00:00:03",
          "6":"Alta de placas",
          "tr_tipo_tramite":"Alta de placas",
          "7":"c30010118 CFE CARLOS MODIF.jpg",
          "comprobante_domicilio":"c30010118 CFE CARLOS MODIF.jpg",
          "8":"Comprobante",
          "tipo_comp_dom":"Comprobante",
          "9":"",
          "identificacion":"",
          "10":"Comprobante",
          "tipo_identi":"Comprobante",
          "11":"",
          "factura_automovil":"",
          "12":"",
          "tipo_factura":"",
          "13":"",
          "poliza_seguro":"",
          "14":"",
          "tipo_poliza":"",
          "15":"",
          "carpeta":""
       }
    ]
  }

Así es como intento mostrar la tabla:

        success: function (response) {
            for (  i = 0 ; i < response; i++){ //cuenta la cantidad de registros
                var nuevafila= "<tr><td>" +
                response[i].tr_oficina + "</td><td>" +
                response[i].num_oficina + "</td><td>" +
                response[i].tr_turno + "</td><td>" +
                response[i].tr_cronometro + "</td><td>" +
                response[i].tr_tipo_tramite + "</td></tr>"

                $("#body_tramites").append(nuevafila)
            }
        }
3
  • saludos la respuesta a esta pregunta la pudieras obtener con la información de este enlace, que es muy similar y lo conteste en la mañana es.stackoverflow.com/questions/145087/…
    – user75901
    Commented el 11 mar. 2018 a las 1:47
  • es mostrar toda la información de un JSON con ayuda de VueJS, axios y html
    – user75901
    Commented el 11 mar. 2018 a las 1:47
  • saludos si te sirve me avisas solo adáptalo a tus necesidades, como puedes notar no solo es mas simple leer el JSOn y recorrerlo si no que también es mas fácil mostrarlo dentro del HTML
    – user75901
    Commented el 11 mar. 2018 a las 1:52

2 respuestas 2

2

Cuando haces la llamada AJAX, en el success lees los datos del response e iteras sobre ellos:

    success: function (response) {
        for (  i = 0 ; i < response; i++){
            ...

Pero el problema es que response no es un array. Al menos no si el JSON que recibes tiene el formato que indicas:

{  
  "data":[  
    {  
      "0":"328",
      ...

El problema es que el array no está directamente en response sino en data. Por lo que deberías indicar que el array está en data. Además, en la cabecera del bucle, la condición de parada sería incorrecta porque no se estaría iterando todo el array (debes comparar con el .length).

Con esos cambios, el código del success se vería así y ya debería funcionar:

Asumiendo que response se trata como un objeto y no como una cadena (en cuyo caso deberías hacer un JSON.parse al principio del success).

    success: function (response) {
        for (  i = 0 ; i < response.data.length; i++){ //cuenta la cantidad de registros
            var nuevafila= "<tr><td>" +
            response.data[i].tr_oficina + "</td><td>" +
            response.data[i].num_oficina + "</td><td>" +
            response.data[i].tr_turno + "</td><td>" +
            response.data[i].tr_cronometro + "</td><td>" +
            response.data[i].tr_tipo_tramite + "</td></tr>"

            $("#body_tramites").append(nuevafila)
        }
    }
0
0

Ajax Completo:

 var ajax = $.ajax({
        data:{},
        url:"lib/controladores/consulta_tramites.php",
        success: function (response) {
            for (  i = 0 ; i < response.data.length; i++){ //cuenta la cantidad de registros
                var nuevafila= "<tr><td>" +
                response.data[i].tr_oficina + "</td><td>" +
                response.data[i].num_oficina + "</td><td>" +
                response.data[i].tr_turno + "</td><td>" +
                response.data[i].tr_cronometro + "</td><td>" +
                response.data[i].tr_tipo_tramite + "</td></tr>"

                $("#body_tramites").append(nuevafila)
            }
        },
        error: function (response,status, error) {
            alert("error");
        }

    })

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.