Soy nuevo en Javascript. Tengo una API que quiero obtener y mostrar en HTML de esta manera:
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.