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/[email protected]/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 Commented 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/[email protected]/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

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.