Show table in HTML with Ajax and Json

Navigation
0

I have the following JSON object and would like to show it in an HTML table: 

 {  
    "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":""
       }
    ]
  }

This is how I try to show the table: 

        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)
            }
        }
    
asked by arglez35 11.03.2018 в 02:45
source

2 answers

0

Ajax Complete: 

 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");
        }

    })
    
answered by 11.03.2018 / 17:07
source
1

When you make the AJAX call, in the success you read the data of response and iterate over them: 

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

But the problem is that response is not an array. At least not if the JSON you receive has the format you indicate: 

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

The problem is that the array is not directly in response but in data . So you should indicate that the array is in data . Also, in the header of the loop, the stop condition would be incorrect because the whole array would not be iterated (you should compare with the .length ).

With those changes, the code of success would look like this and should work already:

  

Assuming that response is treated as an object and not as a string (in which case you should do a JSON.parse at the beginning of 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)
        }
    }
    
answered by 11.03.2018 в 04:23
In clause where does not discriminate a subtraction Get data from a form and store it in variables