2

Estoy tratando de imprimir el nombre de los personajes de Star Wars y en que peliculas han aparecido dentro de la saga, obteniendo los datos con SWAPI y utilizando jQuery para las peticiones. Ya tengo los nombres de los personajes en un Array, y también un Array con sus respectivas películas (solo las URL),

URLs de películas

pero cuando intento obtener los nombres de esas películas usando Promise y push(), obtengo un Array de Arrays que parecen vacíos pero no lo están.

Arrays vacíos

Como parecen vacíos no puedo acceder a la información que contienen con [index][index], ya que obtengo un undefined

Este el código en JS:

const API_URL = "https://swapi.dev/api/";
const PEOPLE_URL = "people/:id/";
const FILMS_URL = "films/:id/";
const OPTIONS = { crossDomain: true };

getCharacters(4); //Obtiene los datos de n personajes

function getCharacter (idCharacter) {
    return new Promise((resolve, reject) =>{
        const CHARACTER_URL = `${API_URL}${PEOPLE_URL.replace(':id', idCharacter)}`; //URL del personaje
    $
        .get(CHARACTER_URL, OPTIONS, character => resolve(character)) //Obtiene el objeto de un personaje
        .fail(errIdCharacter => reject(errIdCharacter));
    });
}

function getFilms(urlsFilms){
    return new Promise((resolve, reject) => {
        let filmsNames = [] // Array de los títulos de las películas
        urlsFilms.forEach(films => { //Recorre todo el Array y obtiene cada URl de cada pelicula
            $
                .get(films, OPTIONS, film => filmsNames.push(film.title)) //Agrega el título de la película al Array de títulos
                .fail(errFilms => reject(errFilms));
        })
        resolve(filmsNames)
    })
}

async function getCharacters(counter){ //Obtiene los objetos de los personajes
    let ids = []; //Array para contar y ordenar a los personajes
    for(let i = 1; i <= counter; i++){
        ids.push(i);
    }

    let characterPromises = ids.map(idCharacter => getCharacter(idCharacter));
    let characters = await Promise.all(characterPromises);
    let charactersNames = characters.map(character => character.name);
    let charactersFilms = characters.map(character => character.films);
    let filmsPromises = charactersFilms.map(films => getFilms(films));
    let filmsNames = await Promise.all(filmsPromises);

    console.log(charactersFilms); //Imprime un Array de Arrays con las URL de la películas
    console.log(charactersFilms[0][0]); //Imprime la URL de la primer pelicula del primer personaje
    console.log(filmsPromises); //Imprime las promesas para obtener los objetos de las películas
    console.log(filmsNames); //Imprime el Array de Arrays que parecen vacios
    console.log(filmsNames[0][0]); //imprime un undefined

    /* for(let i = 0; i < counter; i++){
        console.log(`Hola, soy ${charactersNames[i]} y quizas que conozcas por aparecer en películas como:`);
        charactersFilms[i].forEach(film => console.log(film))
    } */
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
    <script src="CharactersFilms.js"></script>
</body>
</html>

1 respuesta 1

1

Creo que el problema está en el getFilms, en el bucle que haces de urlFilms no se esta esperando a que se completen los gets, para hacer el resolve(filmsNames), es decir creo que esta haciendo el resolve sin esperarse a hacer las llamadas de dentro del bucle que son las que rellenan el array.

Creo que habría que hacer otro Promise.all de ese bucle interno para que cuando llegue al resolve(filmsNames) ya haya acabado todas las llamadas.

1
  • 1
    Muchas gracias, si era eso. Lo corregí agregando las promesas de los títulos a un Array y después haciendo un Array con esos Arrays. Y para obtener el Array de los nombres hice un Promise.all() a cada Array de promesas.
    – AaroIPR
    Commented el 11 feb. 2021 a las 21:01

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.