Estoy tratando de llenar una Datatable con los 87 personajes de Star Wars, para esto estoy haciendo llamados Ajax y los meto en la Datatble, el problema es que el API tira diez personajes mediante un JSON por cada url y oucpo usar varas llamadas para poder obtener los 87, lo que no se es como hacer las llamadas y llenar la datatble con esta, aqui tengo la Dtatable con los primeros 10 personajes.
-
2Bienvenido para entender mejor tu pregunta editala y agrega el codigo de la tabla– Raul Cacachoel 5 abr. 2018 a las 14:57
-
Revisa este enlace stackoverflow.com/questions/47365401/…– cigniusel 5 abr. 2018 a las 15:05
-
¿Sabes si tiene una api que te liste todo o esta es la única forma de listar pagina por pagina?– bercklyn Carlosvizael 5 abr. 2018 a las 17:07
-
Apenas pueda subo el código al post, en cuanto al API está trae los 87 personajes en formato JSON pero la página por cada URL tira 10 nada más, por ejemplo la que estoy usando de "/people" me tira 10, para agarrar los otros 10 y así, tendría que usar un nuevo llamado por ejemplo "/people/?page=2" por eso tengo que hacer múltiples llamados para llenarla y es aquí donde me da problema– bojackhorseman99el 5 abr. 2018 a las 17:49
1 respuesta
No encontré nada parecido a una función en javascript que pueda iterar una url base con diferentes parámetros (en este caso las paginas) pero la solución que ofrezco resolverá tu problema. Como primer paso cambie tu forma de iniciar el Datatable()
para que se hiciera con un data ya cargada. Para tener todos los datos en conjunto los ejecuto en un ajax()
por separado que son usados como parámetros de entrada para la función $.when
que lo que haces es esperar a que todas los peticiones se completen para ejecutarse el done en donde concatenarías los result y posteriormente inicializas el Datatable. A modo de ejemplo solo hice las pagina 1 y 2.
Fuente SOen: Uso de when() y Uso de Concat
$(document).ready(function() {
var arreglo = ['https://swapi.co/api/people/', 'https://swapi.co/api/people/?page=2'];
// asigno a una variable a un ajax unico que sera ejecutado
var call1 = $.ajax({
url: arreglo[0]
});
var call2 = $.ajax({
url: arreglo[1]
});
// ejecuto el when mandandole de momento los dos ajax y espero la respuesta respectiva
// en r1 y r2
$.when(call1, call2).done(function(r1, r2) {
// la respuesta que devuelve tiene un formato de lista de tres valosres siendo el primero
// el result normal del ajax por eso la data devuelta seria r1[0] en donde entro
// al atributo results para ser concatenada con los demas result.
data = r1[0].results.concat(r2[0].results);
$('#example').DataTable({
data: data, // aqui inicializo el datatable con la data.
columns: [{
data: 'name'
},
{
data: 'height'
},
{
data: 'hair_color'
},
{
data: 'skin_color'
},
{
data: 'gender'
}
]
});
});
});
<html>
<head>
<meta charset="utf-8">
<title>Proyecto Ambiente</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Nombre</th>
<th>Altura</th>
<th>Color de Pelo</th>
<th>Color de Piel</th>
<th>Genero</th>
</tr>
</thead>
</table>
</body>
</html>
-
Perfecto, justo lo que necesitaba, voy a leerme eso y seguir para poder agregar las demas paginas, muchas gracias! el 6 abr. 2018 a las 0:44