0

Estoy intentando sacar los registros del siguiente objeto

introducir la descripción de la imagen aquí

Si lo abro muestra mis datos

introducir la descripción de la imagen aquí

Y los estoy intentando sacar y meterlos a un tbody pero no me queda.

Este es mi código.

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

Datos que obtengo de los atributos del la 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: ""

}
11
  • Podras copiar el json ? Commented el 25 jul. 2018 a las 20:45
  • son muchos registros por eso solo les pose captura
    – Javier fr
    Commented el 25 jul. 2018 a las 20:46
  • Almenos el head y 1 o 2 elementos del array Commented el 25 jul. 2018 a las 20:47
  • Listo ya puse los atrubutos del primer renglon.
    – Javier fr
    Commented el 25 jul. 2018 a las 20:49
  • Como te queda la variable html cuando termina el for ? Commented el 25 jul. 2018 a las 20:51

1 respuesta 1

2

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>

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>

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.