0

Por qué me dice que la longitud del array es de 0? Por consola (la de Google Chrome no la de Codepen ) aparece el array indicando que su longitud es de 4

Codepen

HTML:

<html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <p id="results">    </p>
</body>
</html>

JS:

  function get(URL, callback){
      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {
          const DONE = 4;
          const OK = 200;
          if (this.readyState === DONE) {
              if(this.status === OK){
                callback(null, JSON.parse(this.responseText));
              }else {
                  callback(newError(`Se produjo un error ${this.status}`));
              }
          }
      }
     xhr.open('GET', URL);
      xhr.send(null);
  }

  function _handleError(err) {
    console.log(`Request failed: ${err}`);
  }


  var characterArray = new Array();
  for(let i = 1; i < 5; i++ ){
    get(`https://www.swapi.co/api/people/${i}/`, function onResponse(err, luke){
      if(err) {
         return _handleError(err);
      }
      characterArray.push(luke.name);
    });  
  }
  console.log('characters', characterArray);
  document.getElementById('results').innerHTML = characterArray.length;
1

2 respuestas 2

4

El problema es que estas haciendo llamadas asincroneas. Estas asignando el lenght del array antes de que la funcion get regrese. La solucion es assignar el valor dentro de la funcion get asi:

 var characterArray = new Array();
  for(let i = 1; i < 5; i++ ){
    get(`https://www.swapi.co/api/people/${i}/`, function onResponse(err, luke){
      if(err) {
         return _handleError(err);
      }
      characterArray.push(luke.name);
      console.log('characters', characterArray);
      document.getElementById('results').innerHTML = characterArray.length;
    });  
  }
1

Como dijo @Alanafcm, el llamado por medio de un Ajax es asincrono por lo tanto cuando intentas acceder a tu variable CharacterArray él aun está vacío.

Debes utilizar callbacks para hacer esto, por ejemplo:

// inicias tu array vacío
var characterArray = new Array();

//esta función adminte un callback para ejecutar al finalziar
function createArray(callback){

  for(let i = 1; i < 5; i++ ){
    get(`https://www.swapi.co/api/people/${i}/`, function onResponse(err, luke){
      if(err) {
         return _handleError(err);
      }
      characterArray.push(luke.name);
    });  
  }
  
  // una vez terminado el for, ejecutamos tu callback, le envíamos la variable con el array pusheado
  callback(characterArray);

}

// llamas a tu función y como parámetro le enviamos una función "callback()"

createArray(function(arrayPusheado){

  console.log('characters', arrayPusheado);
  
});

Existen otras formas de resolver los problemas asíncronos, con promesas pero lee bien la documentación.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Cualquier duda, nos avisas.

2
  • he usado este código pero me pasa lo mismo. Dentro de la función createArray() muestro por consola el array y me lo muestra pero cuando uso el metodo .length me pone que es 0.
    – gmarsi
    Commented el 18 may. 2018 a las 20:12
  • he usado un setTimeout() y dentro que me muestre por consola la longitud y si que me la muestra, pero claro dependiendo de los resultados que quiero obtener dentro de la funcion createArray() tengo que establecer mas o menos milisegundos para que me muestre correctamente los resultados. Si establezco el bucle for a i < 10 y en setTimeout() pongo 1000ms a veces me indica que hay 9, 0, 6 resultados. Varia en cada prueba que hago. Si lo pruebas desde Codepen veras a que me refiero codepen.io/gmarsi/pen/KRbwoN?editors=0111
    – gmarsi
    Commented el 18 may. 2018 a las 20:17

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.