Tengo el siguiente código en el que hago varias llamadas AJAX para recibir un JSON de una API, en función de la primera llamada hago otras llamadas, que funcionan correctamente, mi problema es en la última llamada, con el JSON que devuelve unas URLs, lo que pasa que si hago la petición AJAX sin más el formato que me da es una concatenación de URLs que no me vale para nada. Quisiera partir las URLs en el final de cada una para luego poder usarlas, sé que se hace con la función split()
y que debo recorrerlas con un bucle pero estoy atrancado. El código que tengo es el siguiente:
(function(){
var API_URL = "https://swapi.co/api/people/";
var apnd = document.getElementById("apnd");
var search = document.getElementById("input--search");
var subm = document.getElementById("submit")
var persons = {};
persons.birthday;
persons.name;
persons.eyesColor;
persons.hairColor;
persons.height;
persons.skin;
persons.gender;
persons.origin;
persons.species;
persons.films;
$(subm).on("click", recivePersons);
$(search).on("keypress", function(event){
if(event.which == 13){
$("#apndText").html("Trabajando....");
recivePersons();
}
})
function recivePersons() {
$.getJSON({
url: API_URL + "?search=" + $(search).val()
}, starWars);
function starWars(data) {
$("#apndText").fadeOut();
console.log(data);
console.log(data.results[0].birth_year);
persons.birthday = data.results[0].birth_year;
persons.name = data.results[0].name;
persons.eyesColor = data.results[0].eye_color;
persons.hairColor = data.results[0].hair_color;
persons.height = data.results[0].height;
persons.skin = data.results[0].skin_color;
persons.gender = data.results[0].gender;
persons.origin = data.results[0].homeworld;
persons.species = data.results[0].species;
persons.films = data.results[0].films;
$("#apndDate").html("Birth Year: " + persons.birthday);
$("#apndName").html("Name: " + persons.name);
$("#apndEye").html("Hair Color: " + persons.hairColor);
$("#apndEye").html("Eyes Color: " + persons.eyesColor);
$("#apndHeight").html("Height: " + persons.height + "cm");
$("#apndSkin").html("Skin Color: " + persons.skin);
$("#apndGender").html("Gender: " + persons.gender);
console.log(persons.origin)
$.getJSON({url: persons.origin}, function(data){
console.log(data);
// PERSONS.NAME ES UN NUEVO ATRIBTO DENTRO DE OTRA LLAMADA, NO CONFUNDIR CON EL NOMBRE DE PERSONAJE
persons.originPlanet = data.name;
$("#origin").html("Origin Planet: " + persons.originPlanet);
})
$.getJSON({url: persons.species}, function(data){
console.log(data);
// OTRA VEZ PERSONS.NAME ES UN NUEVO ATRIBTO DENTRO DE OTRA LLAMADA, NO CONFUNDIR CON EL NOMBRE DE PERSONAJE
persons.speciesOwn = data.name;
$("#specie").html("Specie: " + persons.speciesOwn);
})
$.getJSON({url: persons.films}, function(data){
for( var i = 0; persons.films < 12; i++ ){
console.log(data[i].split(","));
}
})
}
}
})();
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Star Wars</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<h1>Search all the people of Star Wars</h1>
<input type="text" class="text" name="search" id="input--search" placeholder=" Search any person of Star Wars...">
<input type="submit" value="Buscar" class="submit" id="submit">
<div class="apnd" id="apnd">
<p id="apndText"></p>
<p id="apndDate"></p>
<p id="apndName"></p>
<p id="apndEye"></p>
<p id="apndHair"></p>
<p id="apndHeight"></p>
<p id="apndSkin"></p>
<p id="apndGender"></p>
<p id="origin"></p>
<p id="specie"></p>
</div>
<script src="static/js/jquery.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>
El código que no me funciona es el de la última llamada
El JSON que recibo es el siguiente:
GET http://swapi.co/api/films/4/,http://swapi.co/api/films/3/,http://swapi.co/api/films/1/ 404 (NOT FOUND)
La API es pública y y en la parte de películas no le puedo pasar un parametro search de personaje para que me devuelva las películas en las que salio cada personaje. En cambio cuando hago una consulta en la parte de personajes si recibo un Array con URLs de la parte de películas en las que salió cada personaje.
Los enlaces más fáciles de consultar con documentación sobre la APi y que hacen referencia a estos son: