1

estoy tratando de hacer que la variable users que contiene un array de nombres de usuarios pueda ser utilizada desde fuera del fetch. cuando hago console log dentro del fetch no tengo problema, me aparece la variable con sus nombres en tipo array, el problema es cuando intento mostrar los datos de la variable users fuera del fetch esta me aparece vacia. existe alguna manera de poder utilizar para luego recorrer esa variable fuera del fetch?

let sliders = document.getElementsByClassName('sliders');
let contentDots = document.querySelector('.content-dots');
let name = document.getElementsByClassName('.name');



let sliderArray = [];
let users = []; // esta variable no puede ser mostrada fuera del fetch

fetch('https://jsonplaceholder.typicode.com/users')
.then(resp => {
    console.log(resp.status);
    return resp.json();
})

.then(data => {
    data.map((persona) => {  
    let nombres = persona.name;
    users.push(nombres);
    })
})


for(i = 0; i < sliders.length; i ++) {
    sliderArray.push(sliders[i]);
}

for(i = 0; i < sliderArray.length; i++) {
    let dots = document.createElement('div');
    dots.className += 'dots';
    contentDots.append(dots);
    console.log(dots);
}
6
  • @gbianchi buenisimo intentare mediar la variable con un scope global.
    – Richi
    el 5 sep. 2019 a las 22:12
  • ¿Tu fetch si te está trayendo los usuarios?
    – farsSharp
    el 5 sep. 2019 a las 22:29
  • @farsSharp si si
    – Richi
    el 5 sep. 2019 a las 22:36
  • Hola, el problema es de sincronía. fetch realiza un proceso asíncrono, por lo tanto JS pone dicho proceso en el event loop y continúa la ejecución del código que venga después de la llamada a fetch. Es por ello que el console.log fuera del fetch te devuelve en este caso un array vacío, ya que el mismo aún no ha sido llenado. Para resolverlo tendrías que implementar tu lógica dentro de la segunda llamada then del método fetch. Saludos el 5 sep. 2019 a las 22:36
  • Otra opción sería implementar async/await, todo va a depender de si realmente necesitas tu variable fuera del ámbito de fetch o no. Saludos el 5 sep. 2019 a las 22:51

3 respuestas 3

1

Para que la sintaxis sea como quieres, la única forma es que todo se ejecute dentro de una función async, toda vez que usamos el await la ejecución se queda esperando:

(async () => {

let users = ['usuario1'];

await fetch('https://jsonplaceholder.typicode.com/users')
  .then(resp => resp.json())
  .then(data => {
    data.forEach((persona) => {
      let nombres = persona.name;
      users.push(nombres);
    });
  });

//AQUI SE PUEDE USAR USERS
console.log(users);


})();

sino, tienes que usar el then(), como otros usuarios sugirieron, otra opción es lanzar una función en el callback:

let users = ['usuario1'];

fetch('https://jsonplaceholder.typicode.com/users')
  .then(resp => resp.json())
  .then(data => {
    data.forEach((persona) => {
      let nombres = persona.name;
      users.push(nombres);
    });
    hacerAlgo(); //<-- Aquí users tiene datos nuevos
  });


function hacerAlgo() {
  console.log(users);
}

1
  • Siempre y cúando no se tenga que dar soporte a IE será una gran idea utilizar ES6. el 9 sep. 2019 a las 21:07
1

Cuando tenemos una petición fetch esto es una llamada en segundo plano, más conocido como ajax, lo que ocurre en javascript es que el callback de retorno sólo es capturado en el then, lo que se conoce como promesa, este es parte de tú código :

let sliderArray = [];
let users = []; // esta variable no puede ser mostrada fuera del fetch

fetch('https://jsonplaceholder.typicode.com/users')
.then(resp => {
    console.log(resp.status);
    return resp.json();
})

.then(data => {
    data.map((persona) => {  
    let nombres = persona.name;
    users.push(nombres);
    })
})

Lo que ocurre es que se debe encapsular el código con una promesa para llegar a tener esos valores disponibles y a mí parecer tener una visión de cúando se complete la petición entonces haré los otros loops, con información de usersResolved que contendrá los nombres.

let sliders = document.getElementsByClassName('sliders');
let contentDots = document.querySelector('.content-dots');
let name = document.getElementsByClassName('.name');
let sliderArray = [];

new Promise(function(res,rej){
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(resp => {
    console.log(resp.status);
    return resp.json();
    }).then(data => {
        let users = [];
    data.map((persona) => {  
    let nombres = persona.name;
    users.push(nombres);
    });
    res(users);
    });
}).then( usersResolved => {

 // Es el array de Users.
 console.dir(usersResolved);

 // Una vez resuelto los nombres de usuario..

  for(i = 0; i < sliders.length; i ++) {
    sliderArray.push(sliders[i]);
    }

    for(i = 0; i < sliderArray.length; i++) {
        let dots = document.createElement('div');
        dots.className += 'dots';
        contentDots.append(dots);
        console.log(dots);
    }

} );
1

Primero cambia la sintaxis de tu fetch y asginalo a una variable que sí tengo acceso al resto del ambito. Desconozco el resto de tu estructura de tu script; es muy probable que eso juegue con tu variable.

Es por tu ultimo then. Es debido al map que estás aplicando. Recuerda que map sí hace un loop pero te retorna un arreglo de lo que solicites; en ese loop solo lo de tu lista tiene alcance. Por ende, no es necesario hacer el push dentro.

var users = () => fetch('https://jsonplaceholder.typicode.com/users')
.then(resp => {
    console.log(resp.status);
    return resp.json();
}).then(data => data.map(persona => persona.name ));

users();
1
  • claro @farsSharp comprendo, pero aun no logro hacer que ese array de nombres sea usado en cualquier parte del script
    – Richi
    el 5 sep. 2019 a las 22:43

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.