Estoy tratando de hacer una paginación de varias maneras distintas y no doy con ello... El problema es que obtengo un json desde la base de datos y no logro sacarlo de ahí correctamente para utilizarlo. Logro pasarlo a una variable externa a la función, pero una vez ahí ni siquiera me muestra la propiedad .length
una vez fuera... Me dice que su tamaño es 0, cosa que es mentira porque si lo imprimo en consola el array entero sí me aparece y me pone length: 3, como ves a continuación:
arrayPersonas después de llamar a la funcion:[]
0: {idpersona: "1", nombre: "Nombre", apellidos: "Apellidos", sexo: "Masculino"}
1: {idpersona: "2", nombre: "Nombre", apellidos: "Apellidos", sexo: "Femenino"}
2: {idpersona: "3", nombre: "Facundo", apellidos: "El De Las Pipas", sexo: "Masculino"}
length: 3
__proto__: Array(0)
Pero cuando escribo arrayPersonas.length
me pone 0 y por eso no logro acceder... Os muestro el código:
var arrayPersonas = Array();
const mostrarPersonasPaginacion = () => {
var url = "./ejecutarConsultas.php";
fetch(url, {
headers: {
"Content-Type": "application/json"
}
})
.then(res => res.json())
.then(lista_de_personas => {
console.log("lista_de_personas dentro del fetch:",lista_de_personas);
console.log("Tamaño de lista_de_personas dentro del fetch:",lista_de_personas.length);
console.log("Tratando de acceder lista_de_personas con .nombre dentro del fetch:",lista_de_personas[2].nombre);
console.log("Tratando de acceder lista_de_personas con ['nombre'] dentro del fetch:",lista_de_personas[2]['nombre']);
console.log("Tipo de lista_de_personas dentro del fetch:",typeof(lista_de_personas));
for (let i = 0; i < lista_de_personas.length; i++) {
arrayPersonas[i] = lista_de_personas[i];
//console.log(arrayPersonas[i]);
}
console.log("arrayPersonas dentro del fetch:",arrayPersonas);
console.log("Tamaño de arrayPersonas dentro del fetch:",arrayPersonas.length);
console.log("Tratando de acceder arrayPersonas con .nombre dentro del fetch:",arrayPersonas[2].nombre);
console.log("Tratando de acceder arrayPersonas con ['nombre'] dentro del fetch:",arrayPersonas[2]['nombre']);
console.log("Tipo de arrayPersonas dentro del fetch:",typeof(arrayPersonas));
})
.catch(function (error) {
console.log("¡Error!", error);
})
console.log("arrayPersonas dentro de la función y fuera del fetch:",arrayPersonas);
console.log("Tamaño de arrayPersonas dentro de la función y fuera del fetch:",arrayPersonas.length);
//console.log("Tratando de acceder arrayPersonas con .nombre dentro de la función y fuera del fetch:",arrayPersonas[2].nombre);
//console.log("Tratando de acceder arrayPersonas con ['nombre'] dentro de la función y fuera del fetch:",arrayPersonas[2]['nombre']);
console.log("Tipo de arrayPersonas dentro de la función y fuera del fetch:",typeof(arrayPersonas));
}
mostrarPersonasPaginacion();
console.log("arrayPersonas después de llamar a la funcion:",arrayPersonas);
console.log("Tamaño de arrayPersonas después de llamar a la funcion:",arrayPersonas.length);
//console.log("Tratando de acceder arrayPersonas con .nombre dentro de la función y fuera del fetch:",arrayPersonas[2].nombre);
//console.log("Tratando de acceder arrayPersonas con ['nombre'] dentro de la función y fuera del fetch:",arrayPersonas[2]['nombre']);
console.log("Tipo de arrayPersonas después de llamar a la función:",typeof(arrayPersonas));
Llevo unos cuantos días probando muchas formas... Me falla también si lo hago con return y llamando a la función como valor de la variable arrayPersonas (encuyo caso, me dice undefined
. También he probado en vez de var arrayPersonas = Array();
cambiándolo por var arrayPersonas = [];
con el mismo resultado que os he comentado al principio.
En cuanto al tipo, todas pone que son Object
. La que viene desde el fetch, sí lo es, que que es un Json. Pero lo otro precisamente la intención es transformarla en array. De hecho, tanto la lista_de_personas
como el arrayPersonas
cuando los pongo por consola se muestran así:
lista_de_personas dentro del fetch: (3) [{…}, {…}, {…}]0: {idpersona: "1", nombre: "Nombre", apellidos: "Apellidos", sexo: "Masculino"}1: {idpersona: "2", nombre: "Nombre", apellidos: "Apellidos", sexo: "Femenino"}2: {idpersona: "3", nombre: "Facundo", apellidos: "El De Las Pipas", sexo: "Masculino"}length: 3__proto__: Array(0)
Como digo, la del arrayPersonas, aún dentro del fetch, me lo muestra igual. Pero fuera, lo muestra como he puesto arriba cuando mencionaba que sí me mostraba la propiedad .length
. Por tanto, sí hay diferencia entre el fetch y fuera del mismo o de la función. Y es lo que no logro entender... Por eso quería pasarlo a array pero bien, que me reconozca en este caso su propiedad .length 3... De lo contrario, ¿cómo va a funcionarme la paginación si no sé cuántas personas hay en total?
Espero que se entienda claro... ¡Muchas gracias!