Remove object records and fill tbody with Ajax JavaScript

Question

Remove object records and fill tbody with Ajax JavaScript

Navigation

#1 by (2 votes)

0

I'm trying to get the records of the next object

If I open it, show my data

And I'm trying to get them out and put them in a tbody but I do not have any left.

This is my code.

success: function(data) {
                var html = '';
                var i;
              for (i = 0; i < data.length; i++) {
                html += '<tr>' +
                  '<td>' + data.todas_calls[i].calldate + '</td>' +
                  '</tr>';
                  i++;
              }
                  $('#reg_tabla').html(html);
            },

Data I get from the attributes of the bd

{

    accountcode: "financiera_arc-in",
    amaflags: "3",
    billsec: "5",
    calldate: "2018-05-01 08:46:43",
    channel: "SIP/TRK-4422901000-00001cf9",
    clid: "\"FINANCIERA ARC\" <4773256472>",
    dcontext: "virtual",
    disposition: "ANSWERED",
    dst: "564",
    dstchannel: "SIP/corp_lomas-500-00001cfa",
    duration: "25",
    lastapp: "Playback",
    lastdata: "vm1&vm_financiera_arc&vm2",
    src: "4773256472",
    userfield: ""

}

javascript ajax

asked by Javier fr 25.07.2018 в 22:43

source

1 answer

Result in Ajax multiplying the array values Error with the function "function bind_param () on boolean"

score 2 · Accepted Answer

The response you receive from the backend is an object of the form

{
 todas_calls: [
   {calldate:"2018-06-01", financiera: "Los 3 chanchitos"},
   {calldate:"2018-06-02", financiera: "La deuda"}
 ]
}

That is, you have to iterate not on data but on data.todas_calls :

Suppose you extract the processing to a function dibujaTabla

function dibujaTabla(data) {
  var html = '';
  data.todas_calls.forEach(function(fila) {
     html += '<tr>' +
             '<td>' + filas.calldate + '</td>' +
             '</tr>';         
  });
  $('#reg_tabla').html(html);
}
...
 success: function(data) {
   dibujaTabla(data);
 });

Let's make an example with an explicit answer:

function dibujaTabla(data) {
  var html = '';
  data.todas_calls.forEach(function(fila) {
    html += '<tr>' +
      '<td>' + fila.accountcode + '</td>' +
      '</tr>';
  });
  $('#reg_tabla').html(html);
}

var respuesta = {
  todas_calls: [{
      accountcode: "financiera1",
      billsec: 5,
      calldate: "2018-05-01 08:46:43",
      duration: 25
    },
    {
      accountcode: "financiera2",
      billsec: 45,
      calldate: "2018-05-02 14:46:43",
      duration: 38
    },
    {
      accountcode: "financiera3",
      billsec: 8,
      calldate: "2018-05-04 08:56:43",
      duration: 45
    },
    {
      accountcode: "financiera4",
      billsec: 15,
      calldate: "2018-05-05 18:46:43",
      duration: 15
    }
  ]
};

dibujaTabla(respuesta);

#reg_tabla {
border:1px solid;
}

#reg_tabla td {
border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="reg_tabla">

</table>

But it would be a nuisance to have to write each column in the table in advance, so it would be more efficient to take the fields from the first record and use them as a dictionary (assuming all records have the same fields):

function dibujaTabla(data,campos) {
  var tabla = $('#reg_tabla');
  tabla.empty(); // vaciamos la tabla;
  var cabecera=jQuery('<tr></tr>');
  campos.forEach(function(campo) {
    cabecera.append('<td>'+campo+'</td>');
  });
  
  tabla.append(cabecera);
  
  data.todas_calls.forEach(function(objeto) {
    var fila=jQuery('<tr></tr>');
    campos.forEach(function(campo) {
        fila.append('<td>'+objeto[campo]+'</td>');
    });
    tabla.append(fila);
  });
}

var respuesta = {
  todas_calls: [{
      accountcode: "financiera1",
      billsec: 5,
      calldate: "2018-05-01 08:46:43",
      duration: 25
    },
    {
      accountcode: "financiera2",
      billsec: 45,
      calldate: "2018-05-02 14:46:43",
      duration: 38
    },
    {
      accountcode: "financiera3",
      billsec: 8,
      calldate: "2018-05-04 08:56:43",
      duration: 45
    },
    {
      accountcode: "financiera4",
      billsec: 15,
      calldate: "2018-05-05 18:46:43",
      duration: 15
    }
  ]
};

// Obtienes los nombres de columnas:

var columnas = Object.getOwnPropertyNames(respuesta.todas_calls[0]);

dibujaTabla(respuesta,columnas);

#reg_tabla {
border:1px solid;
}

#reg_tabla td {
border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="reg_tabla">

</table>