0

Estoy tratando de llenar una lista de personajes provenientes de una Api, pero tengo una duda de como lleno el array, he tenido dificultades de solo tener 10 personajes y que de estos se vean en una lista y generen un link a una película. Hasta ahora tengo la llamada de la API, pero solo me imprime el Json en la consola, habiéndole creado conexión con el html

function ajax_get(url, callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.status == 200) {
            console.log('responseText:' + xmlhttp.responseText);
            try {
                var data = JSON.parse(xmlhttp.responseText);
            } catch(err) {
                console.log(err.message + " in " + xmlhttp.responseText);
                return;
            }
            callback(data);
        }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

ajax_get("https://swapi.co/api/people/", function(data) {

    var html = "<h2>" + data["title"] + "</h2>";
    html += "<h3>" + data["description"] + "</h3>";
    html += "<ul>";
       for (var i=0; i < "https://swapi.co/api/people/10"; i++) {
           html += '<li><a href="' + data["people"][i]["name"] + '">' + data["people"][i]["mass"] + "</a></li>";
       }
    html += "</ul>";
    document.getElementById("text").innerHTML = html;
});

Agradezco la atención

1
  • Visitando la URL que usas, swapi.co/api/people, creo que no estás respetando la estructura del JSON: los datos están anidados en el campo results, que es un array de elementos. No hay people, ni title... Commented el 1 feb. 2018 a las 8:38

4 respuestas 4

2

La verdad que deberías revisar bien que es lo que querías, había muchas cosas que no tienen sentido, por un lado estas intentando leer propiedades del json que te devuelve la api que no existen, deberías revisar la estructura, y luego tienes un for cuya condición es que un numero sea menor que un string, que no tiene ningún sentido.

Te he hecho ciertos cambios en el código y te los he ido comentando, échale un ojo.

function ajax_get(url, callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.status == 200) {
    
            try {
                var data = JSON.parse(xmlhttp.responseText);
            } catch(err) {
                //console.log(err.message + " in " + xmlhttp.responseText);
                return;
            }
            callback(data);
        }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

ajax_get("https://swapi.co/api/people/", function(data) {
    
    //La llamada a la api, te devuelve un json con un atributo "results" que es donde vienen los personajes en forma de array, los guardamos en una variable
    var persons=data.results;
  
    //La propiedad data["title"] no existe en el json que recibes
    //var html = "<h2>" + data["title"] + "</h2>";
    var html = "<h2>Lista de personajes</h2>";
    //La propiedad data["description"] tampoco existe en el json que recibes
    //html += "<h3>" + data["description"] + "</h3>";
    html += "<h3>Esta es mi lista de personajes personalizada</h3>";
    html += "<ul>";
       //Este for no tiene sentido, estas haciendo un bucle en el cual la condicion es que un numero sea menor a un string, lo que debes hacer es recorrer el array de persons que hemos creado mas arriba
       //for (var i=0; i < "https://swapi.co/api/people/10"; i++) {
       for(var index in persons){
          //Recojemos cada personaje
          let person=persons[index];
          //Lo añadimos a la variable html sus datos
          html += '<li><a href="' + person.url + '">' + person.name + "</a></li>";
       }
    
    html += "</ul>";
    document.getElementById("text").innerHTML = html;
});
<html>
 <body>
  <div id="text"></div>
 </body>
</html>

2

Buenas, yo también veo cosas raras en la función ajax_get y en el bucle for cuando llamas a la función. Te dejo una aproximación, ojalá te sirve de ayuda. En el console.log comentado verás lo que te devuelve el server

Saludos

function ajax_get() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open('GET', 'https://swapi.co/api/people/', true);
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4) {
      if (xmlhttp.status === 200) {
        getResult(xmlhttp);
      }
    }
  };
  xmlhttp.send(null);
}

function getResult (xhr) {
  var array = JSON.parse(xhr.response);
  //console.log(array);

  for (var i = 0; i < array.results.length; i++) {
    var p = document.createElement('p');
    document.body.appendChild(p);
    p.innerText = i+1 + '.- ' + array.results[i].name;
  }
}

ajax_get();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<script src="main.js"></script>
</body>
</html>

1

Nose si lo he entendido bien pero igual lo que te falta es recorrer el Json e ir leyendolo.

$.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
});

Aquí puedes encontrar la solución mas detallada, sino te vale necesito que me des mas información sobre tu problema.

Saludos

1

Creo que esta linea no es correcta:

for (var i=0; i < "https://swapi.co/api/people/10"; i++)

estas condicionando un integro con una cadena de texto, si no me equivoco for (var i=0; i < "https://swapi.co/api/people/10"; i++) no hace nada tal y como está en ese momento.

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.