0

Estoy intentando sacar información por un método fetch, pero al actualizar la página me salta el error Uncaught (in promise) TypeError: Cannot read property 'map' of undefined. Parece que algo no funciona en el parametro de la función `listadoUsuarios(). Código JS:

var div = document.querySelector('#usuarios');
var load = document.querySelector('#load');

getUsuarios()
    .then(data => data.json())
    .then(users => {
    listadoUsuarios(users.data);
});

function getUsuarios(){
    return fetch('https://jsonplaceholder.typicode.com/users');
}
function listadoUsuarios(usuarios){
    usuarios.map((user , i) => {
        let nombre = document.createElement('h2');
        nombre.innerHTML = `${i} - ${user.name}, ${user.username}`;
        div.appendChild(nombre);
        load.style.display = 'none';
    });
}

Html:

<body>
    <h1>Listado de usuarios</h1>
    <div id="usuarios">
       <p id="load">Cargando...</p> 
    </div>
    <script src="Fetch.js"></script>
</body>

Gracias

1 respuesta 1

1

Pienso que la forma en la que se llama a la API puede estar provocando el mensaje de TypeError, Fetch necesita configuración async:

function getUsuarios(){
          fetch('https://jsonplaceholder.typicode.com/users', {
              headers: {
                  Accept: 'application/json',
              }
          })
          .then((response) => response.json())
          .then(res => {
              console.log(res);
              listadoUsuarios(res);// la respuesta ya regresó
          })
          .catch(error => {
              console.error(error);
          })
      }

Una vez que la respuesta ya regresó, ya se puede llamar a la función que la maneja (handler), en este caso listadoUsuarios(usuarios):

function listadoUsuarios(usuarios){
       
          usuarios.map((user , i) => {
              let nombre = document.createElement('h2');
              nombre.textContent = `${i} - ${user.name}, ${user.username}`;
              div.appendChild(nombre);
              load.style.display = 'none';
          });
      }

Ahora, es recomendable usar la propiedad textContext, en vez de innerHTML. https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Finalmente, tu script puede hacer la llamada a la función getUsuarios() al iniciar la app, así como la configuraste, pero sin el código de fetch:

function listadoUsuarios(usuarios){
       
          usuarios.map((user , i) => {
              let nombre = document.createElement('h2');
              nombre.textContent = `${i} - ${user.name}, ${user.username}`;
              div.appendChild(nombre);
              load.style.display = 'none';
          });
      }

      function getUsuarios(){
          fetch('https://jsonplaceholder.typicode.com/users', {
              headers: {
                  Accept: 'application/json',
              }
          })
          .then((response) => response.json())
          .then(res => {
              console.log(res);
              listadoUsuarios(res);
          })
          .catch(error => {
              console.error(error);
          })
      }
      getUsuarios();

Saludos

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.