0

Soy nuevo en Javascript. Tengo una API que quiero obtener y mostrar en HTML de esta manera:

introducir la descripción de la imagen aquí

Hasta hoy hizo:

fetch('https://www.hatchways.io/api/assessment/students')
  .then(response => response.json())
  .then(json => console.log(json))

Y solo me devuelve en la consola:

{
"students": [
{
"city": "Fushë-Muhurr",
"company": "Yadel",
"email": "[email protected]",
"firstName": "Ingaberg",
"grades": [
"78",
"100",
"92",
"86",
"89",
"88",
"91",
"87"
],
"id": "1",
"lastName": "Orton",
"pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasdictablanditiis.jpg",
"skill": "Oracle"
}, ...

Si tienen ideas o tutoriales estaré feliz de escucharlos.

Intenté también:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
const request = new XMLHttpRequest();

request.open('GET', 'https://www.hatchways.io/api/assessment/students');
request.send(); 

request.onload = () => {
  if (request.status === 200) {
    console.log("Success"); // So extract data from json and create table

    //Extracting data
    var obj = JSON.parse(request.response).students;
    //var joke = JSON.parse(request.response).value.joke;

    //Creating table
    var table="<table>";
    table+="<tr><td>Joke ID</td><td>Joke</td></tr>"; 
    table+="<tr><td>"+obj.students[0].firstname+"</td><td>"+obj.students[0].firstname+"</td></tr>";
    table+="</table>";

    //Showing the table inside table
    document.getElementById("demo").innerHTML = table;   

  }
};

request.onerror = () => {
  console.log("error")
};</script>

</body>
</html>

Pero me devuleve:

Uncaught TypeError: Cannot read property '0' of undefined
    at XMLHttpRequest.request.onload

Estaba tratando de llegar al primer estudiante.

1 respuesta 1

1

Es cuestión de buscar en tu JSON las diferentes claves. Dado que tienes un array de objetos JSON, debes abrir primero un bucle.

En este ejemplo construiremos todo el contenido dentro del bucle y luego actualizaremos el contenedor una sola vez, fuera del bucle.

fetch('https://www.hatchways.io/api/assessment/students')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    var divOut = document.getElementById('txtOut');
    var allStudents = myJson.students;
    var txtOut = "";
    for (var k in allStudents) {
      txtOut += `<b>${allStudents[k].firstName}</b><br />`;
      txtOut += `email: ${allStudents[k].email}<br />`;
      txtOut += `Company: ${allStudents[k].company}<br />`;
      txtOut += `Skill: ${allStudents[k].skill}<br />`;
      txtOut += `Average: ${allStudents[k].grades}<br />`;
      txtOut += `<img src="${allStudents[k].pic}"><hr />`;
    }
    divOut.innerHTML = txtOut;
  });
<div id="txtOut"></div>

6
  • Muchisimas gracias padre. Sabe si tengo que ponerlo todos en un archivo html o si hay otras maneras para visuarlo ? Commented el 6 abr. 2019 a las 10:24
  • De nada. No entiendo tu pregunta. Si observas hay un contenedor HTML aquí: <div id="txtOut"></div> y fuera del bucle hacemos esto: divOut.innerHTML = txtOut;, poniendo en ese contendor el resultado de lo que se fue recogiendo de los diferentes datos. No sé a qué te refieres con lo del script HTML. Ahí ya estás visualizando el contenido en la página que hizo la llamada a la API.
    – A. Cedano
    Commented el 6 abr. 2019 a las 10:26
  • Mi error, quise decir un archivo html al poner las etiquetas <script> para el json. lo Intenté y parece que funciona Commented el 6 abr. 2019 a las 10:29
  • Es que no entiendo, ¿qué es lo que quieres hacer exactamente? En la pregunta entendí que no podías leer los datos del JSON, que querías leerlos y mostrarlos. Este código los lee y los muestra. ¿Quieres hacer algo más con ellos?
    – A. Cedano
    Commented el 6 abr. 2019 a las 10:30
  • Sí, quería publicarlos en una página web. Pero lo logré poniendo el javascript bajo una etiqueta json dentro de un archivo html. Voy a estudiar la respuesta y aprenderé a hacer el css de la pagina pero es otro paso :) Commented el 6 abr. 2019 a las 10:36

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.