I have the following code in which I make several AJAX calls to receive a JSON from an API, depending on the first call I make other calls, that work correctly, my problem is in the last call, with the JSON that returns some URLs, what happens if I make the AJAX request without more the format it gives me is a concatenation of URLs that I do not use at all. I would like to split the URLs at the end of each one so that later I can use them, I know that it is done with the function split() and that I have to go through them with a loop but I am stuck. The code that I have is the following:
(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>The code that does not work for me is the one from the last call
The JSON that I receive is the following:
GET link 404 (NOT FOUND)
The API is public and in the movies part I can not pass a character search parameter to return the movies in which each character came out. On the other hand, when I make a query in the characters part if I receive an Array with URLs from the part of movies in which each character came out.
The easiest links to consult with documentation on the APi and that refer to these are: