1

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:

https://swapi.co/documentation http://swapi.co/api/films/

5
  • Hola Juan, por favor, agrega un ejemplo del JSON que estas recibiendo (el original que sale del servidor) para entender mejor el problemas. Gracias. Commented el 19 nov. 2016 a las 12:58
  • @rnd he añadido el JSON que recibo.
    – Juan
    Commented el 19 nov. 2016 a las 13:01
  • Juan es no es JSON, estas seguro que asi sale del servidor ? si es asi, muestranos la funcion que lo produce del lado del server. Commented el 19 nov. 2016 a las 13:05
  • @rnd Sí, lo sé, pero es lo que me devuelve, he intentado explicarlo al final de la pregunta. Gracias.
    – Juan
    Commented el 19 nov. 2016 a las 13:16
  • Juan, la ultima edicion sirvio mucho espero que te sriva mi respusta salu2 Commented el 19 nov. 2016 a las 13:43

1 respuesta 1

1

Ahora que veo la API, el problema esta en que person.films es un arreglo y por lo tanto, al usarlo como URL esta resulta invalida pues no es una, sino varias URLs separadas por una coma.

El resultado que viene de la API es así:

  "films": [
    "http://swapi.co/api/films/6/",
    "http://swapi.co/api/films/3/",
    "http://swapi.co/api/films/2/",
    "http://swapi.co/api/films/1/"
  ],

Si quieres obtener la información de todos los films debes hacerlo Iterando sobre el arreglo ANTES de hacer la solicitud y a su vez, haciendo una solicitud por elemento del arreglo; Algo así:

$.each(persons.films, function(filmUrl) {
  $.getJSON({url: filmUrl}, function(data){
     console.log(data);
  });
});

Esto es como poner el for por fuera, pero usando each de jQuery que es mas conveniente.

Ten en cuenta que spices también devuelve un arreglo. Esta funcionando por que el arreglo contiene un solo elemento, pero si recibiera mas de un elemento tendrias el mismo problema en esa parte.

Te recomiendo que navegues la API con una herramienta tipo Postman, que te permite visualizar los resultados que obtienes y asi entender como estan estructurados los datos.

Salu2

5

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.