Skip to main content
se añadieron 1432 caracteres en el cuerpo
Origen Enlace
ffflabs
  • 23k
  • 28
  • 50

Pero sería una molestia tener que escribir de antemano cada columna de la tabla, por lo cual sería más eficiente tomar los campos del primer registro y usarlos como diccionario (asumiendo que todos los registros tengan los mismos campos):

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>

Pero sería una molestia tener que escribir de antemano cada columna de la tabla, por lo cual sería más eficiente tomar los campos del primer registro y usarlos como diccionario (asumiendo que todos los registros tengan los mismos campos):

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>

se añadieron 1432 caracteres en el cuerpo
Origen Enlace
ffflabs
  • 23k
  • 28
  • 50

La respuesta que recibes del backend es un objeto de la forma

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

Vale decir, tienes que iterar no sobre data sino sobre data.todas_calls:

Supongamos que extraes el procesamiento a una función dibujaTabla

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

Hagamos un ejemplo con una respuesta explícita:

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>

La respuesta que recibes del backend es un objeto de la forma

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

Vale decir, tienes que iterar no sobre data sino sobre data.todas_calls:

Supongamos que extraes el procesamiento a una función dibujaTabla

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

La respuesta que recibes del backend es un objeto de la forma

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

Vale decir, tienes que iterar no sobre data sino sobre data.todas_calls:

Supongamos que extraes el procesamiento a una función 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);
 });

Hagamos un ejemplo con una respuesta explícita:

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>

Origen Enlace
ffflabs
  • 23k
  • 28
  • 50

La respuesta que recibes del backend es un objeto de la forma

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

Vale decir, tienes que iterar no sobre data sino sobre data.todas_calls:

Supongamos que extraes el procesamiento a una función dibujaTabla

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