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),
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.
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>