1

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 .lengthuna 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!

6
  • vos estas probando esto localmente? me refiero si tu server es localhost.
    – jdromero88
    Commented el 30 ago. 2020 a las 19:42
  • Sí, efectivamente. Todo en local, incluida la base de datos... Con Xampp. ¿Cambia mucho el resultado? Commented el 30 ago. 2020 a las 20:31
  • la verdad que no. Solo preguntaba para ver si yo podia conectarme a tu API para probar, porque todavia no me queda claro cual es la respuesta original de tu API (antes de que lo conviertas a Array)
    – jdromero88
    Commented el 30 ago. 2020 a las 20:41
  • Ok, como habías preguntado pensé que igual según qué servidor local use podría dar fallos o algo así. :D Commented el 30 ago. 2020 a las 20:50
  • 1
    ¿Responde esto a tu pregunta? utilizar variable fuera del fetch Commented el 30 ago. 2020 a las 21:25

2 respuestas 2

2

Tu código esta bien estructurado y depurado, pero considera que fetch es asyncronous, esto es, que espera un evento de regreso, en este caso, la respuesta de la API.

Debido a las reglas de ejecución de JS, el programa llama primero a mostrarPersonasPaginacion(), pero fetch aún no regresa, por eso no se tienen los datos en ese momento (el console.log del enclosing scope lo demuestra).

Luego, fetch ya completó la operación async, regresa el resultado de una promesa y nos deja ver estos resultados, dentro de then. (el console.log del scope thenlo demuestra)

Lo más práctico en tu caso, es continuar con la ejecución de tu programa dentro del then donde está la respuesta, entonces puedes llamar primero a la función mostrarPersonasPaginacion().

Yo cambiaría el nombre de mostrarPersonasPaginacion() por cargarDatosDePaginacion().

Después, manejas la respuesta de la promesa dentro de la secuencia then, con otra función de continuación:

.then(lista_de_personas => {
        console.log(lista_de_personas);
         //ya regreso la respuesta, callback
        //aqui llamas tu funcion de continuacion
        //logica de paginacion
        continuationFn(lista_de_personas);
       
    }).catch(function (error) {
        console.log("¡Error!", error);
    })

La sugerencia es analizar a los conceptos de Event Driven Programming, Promises y async/await para JS. Dependiendo del estilo, se manejan diferentes patrones de codificación de eventos async, donde puedes estructurar tu código de otra forma.

Problemas con promesas asycn code Promesas async/await

5
  • ¡Muchas gracias! ¿Y la función de continuación estaría fuera de cargarDatosDePaginación() (me gusta el nombre, el otro era porque la intención inicial era hacerlo todo enero ahí mismo pero no funcionaba anterior y siguiente) o anidada dentro de la misma función pero ya fuera del fetch? Deduzco que una función aparte, pero pregunto por si acaso... En cuanto a lo de async/await tendré que verlo bien, porque parece buena opción y se ahorra algo de código, pero de momento me quedo con fetch. Commented el 30 ago. 2020 a las 20:45
  • @Diego la función es aparte, puedes declararla fuera de la función async mostrarPersonasPaginacion(), pero debes llamarla dentro de fetch, como te indique en el ejemplo. Puedes declararla dentro de fectch, pero se vera muy abultado el código. Yo también prefiero esta configuración, asi no se pierde el concepto del estilo de continuación, pero con async/await el codigo queda escrito en un estilo más funcional. Si te sirvió la respuesta, por favor da click en aceptar. Saludos
    – g.4
    Commented el 30 ago. 2020 a las 20:51
  • Muchas gracias por tu respuesta. Lo pruebo y te confirmo si me va tan bien.:) Que tiene toda la pinta de que sí y está muy bien explicado. No me deja poner tu nick... se borra al guardar... A ver ahora... @g.4 Commented el 30 ago. 2020 a las 21:22
  • @Diego, espero que vaya bien!!!, mira ya hay otra respuesta con respecto a cómo puedes continuar en la nueva función con el manejo del objeto json, saludos.
    – g.4
    Commented el 30 ago. 2020 a las 22:29
  • ¡Hola, @g.4! Finalmente, tu solución, aunque sigo dependiendo de la función de continuación y por tanto el resto de funciones las he metido dentro de la dependiente, salvo botón adelante y atrás, que forzosamente lo tenía que poner fuera, me ha servido.y he entendido suficientemente claro... ¡Muchas gracias! Commented el 1 sept. 2020 a las 11:00
-1

Una vez que recibe la respuesta podes llamar la función que utilizas para manipular tu array de objetos.

Abri una pestaña nueva y podes probarlo en la consola del Chrome:

let personasArray = []
function looping(personasDatos){
    for(let i =0; i < personasDatos.length; i++){
    console.log(personasDatos[i])
  }
}
function doFetch(URL){
    fetch(URL)
    .then(res => res.json())
    //aqui llamas a la funcion looping para pasarle la respuesta del fetch
    .then(lista_de_personas => {
        //spred operator para copiar el array. Asi no hace falta que 
        //vuelvas a hacer otro fetch
        personasArray = [...lista_de_personas.data]
      looping(lista_de_personas.data)
    })
    .catch(err => console.log(err.message)) 
}
doFetch('http://dummy.restapiexample.com/api/v1/employees')

Más información acerca del spread operator

Espero que esto te sirva de ayuda. Saludos!

3
  • 1
    ¿Dé donde sacas lo de hastable? El OP recibe un Array de objetos. ¿Para qué usar Object.keys cuando un bucle for sencillo es suficiente para iterar el Array? El problema del OP no es iterar el Array, sino cuándo iterarlo, ya que pretende hacerlo de forma síncrona después de una llamada asíncrona. Revisa tu respuesta porque tiene defectos. Saludos Commented el 31 ago. 2020 a las 4:24
  • ¡Hola, @jdromero88! No he llegado a entender bien la parte de la constante, ni dónde crearla... Porque si la creo dentro del fetch y luego la necesito usar de otra forma, desde alguna otra función externa, ya está el lío... También es verdad quemi nivel no es muy alto... Pero la idea en sí creo que la entiendo. No obstante, creo que no hasta el momento sólo me ha servido la de @g.4 (que, aunque también dependo de la segunda función, creo que lo he entendido mejor y he podido realizarlo... ¡Muchas gracias! Commented el 1 sept. 2020 a las 10:58
  • Hola @DiegoGrande disculpame, ahora mejore mi respuesta. Copiando el array dentro del fetch asi lo tendrias en una variable para poder manipularlo despues donde lo necesites.
    – jdromero88
    Commented el 2 sept. 2020 a las 15:11

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.