1

estoy intentando consumir una api para luego mostrarlo en una tabla via ajax con DataTables Plugin de Jquery pero no estoy logrando que la tabla se cargue con los datos

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.md5@1.0.2/index.min.js"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

> este es el script que deberia consumir el json

<script>

$('#tabla').dataTable({
  ajax: {
    cache: true,
    url: `https://my-json-server.typicode.com/AldoArevalo%20/repoaldo/aguinaldo`,
    dataSrc: 'data.results'
  },
  columns: [{
    "data": "AACAA_PADR"
  }, {
    "render": function(v, t, data) {
      return `<img width="100" src="${ data.thumbnail.extension}"/>`;
    }
  }, {
    "data": "AACAA_BANC"
  }, {
    "data": "AACAA_CEDU"
  }]
});
</script>
<!DOCTYPE html>
<html lang="es">
    <head>


</head>

<body>
<table id="tabla" class="display" style="width:100%"></table>
</body>
</html>

1
  • puedes poner que es lo que te regresa tu api, en la petición el 30 nov. 2021 a las 18:25

1 respuesta 1

0

Ingresando directamente a la URL proporcionada se obtiene el siguiente resultado:

[
  {
    "AACAA_PADR": 12800,
    "AACAA_BANC": 26,
    "AACAA_CEDU": 3524244,
    "AACAA_APOR_AGUI": 5500000,
    "AACAA_CANT_CUOT": 12,
    "AACAA_IMPO_CUOT": 1800000,
    "AACAA_AAMD_LIQU": 1800000,
    "AACAA_TOTA_PAGA": 20000000,
    "AACAA_AAMM_INIC": " 01-01-2010 "
  }
]

No hay una propiedad results, simplemente se usa data y tampoco hay una propiedad thumbnail, por lo que se genera un error.

$('#tabla').dataTable({
  ajax: {
    cache: true,
    url: `https://my-json-server.typicode.com/AldoArevalo%20/repoaldo/aguinaldo`,
    // Los datos vienen directamente, se debe dejar cadena vacía
    dataSrc: ''
  },
  columns: [
      {
          "data": "AACAA_PADR"
      },
      /* Omitiendo esta columna se crea la tabla correctamente
      {
          "render": function(v, t, data) {
              // No existe la propiedad thumbnail y eso genera error
              return `<img width="100" src="${ data.thumbnail.extension}"/>`;
          }
      },
      */
      {
        "data": "AACAA_BANC"
      }, {
          "data": "AACAA_CEDU"
      }
  ]
});
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.md5@1.0.2/index.min.js"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<table id="tabla" class="display" style="width:100%"></table>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.