How to create a table with the data from API GET HTTPS Response
Question
I have this code with html and JS:
<html>
<head>
<title>Curriculum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<a href = "project.html"><img src="logo.png" class="logo"></a>
<ul>
<li><a href ="project.html">Home</a></li>
<li><a href="AboutUs.html">About Us</a></li>
<li>
<div class="dropdown">
<a href="#">News</a>
<div class="dropdown-content">
<p><a href="News.WorldskillCompetition.html">Worldskill competition</a></p>
<p><a href="#">Scholarship contest</a></p>
<p><a href="#">Algebra Junior</a></p>
</div>
</li>
<li><a href="#">Curriculum</a></li>
<li><a href = "ContactForm.html">Contact</a></li>
</ul>
</div>
<h1>Curriculum</h1>
<hr>
<input type="text", id="text", name="text">
<table width="800px">
<thead>
<tr>
<th width="200px">College</th>
<th>ECTS</th>
<th>Hours</th>
<th>Lection</th>
<th>Practice</th>
<th width="300px">Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello</td>
<td>test</td>
<td>test2</td>
<td>test3</td>
<td>test4</td>
<td>test5</td>
<td> <button type="button" onclick="getData()">Delete</button></td>
</tr>
<tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tfoot>
</tbody>
</table>
<script src="./testing.js"></script>
<script>
async function getData() {
const response = await fetch("https://www.fulek.com/data/api/supit/curriculum-list/hr", {
method: "GET",
headers: {
"Content-Type": "text/plain;charset=UTF-8",
Authorization:
"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MzEzNjM4LCJleHAiOjE2NzQzMTcyMzgsImlhdCI6MTY3NDMxMzYzOH0.8uZVS5PoyinrEDhMxtidBZ8epVe279n5E6o8mhIhHRQ",
},
});
const data = response.json()
return data.then(response => console.log(response.data));
}
</script>
</body>
</html>
And the API GET Call returns this array as shown in the console:
Here is one of the array elements as text
{
"id": 1,
"kolegij": "Autentikacijski sustavi i baze podataka",
"ects": 4,
"sati": 45,
"predavanja": 1,
"vjezbe": 2,
"tip": "Obavezni",
"semestar": 3
}
Here is the complete Array as text:
[{ "id": 1, "kolegij": "Autentikacijski sustavi i baze podataka", "ects": 4, "sati": 45, "predavanja": 1, "vjezbe": 2, "tip": "Obavezni", "semestar": 3 }, { "id": 2, "kolegij": "Engleski jezik", "ects": 4, "sati": 45, "predavanja": 0, "vjezbe": 3, "tip": "Obavezni", "semestar": 1 }, { "id": 3, "kolegij": "Građa računala", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 4, "kolegij": "ICT alati u projektnom menadžmentu", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Izborni", "semestar": 6 }, { "id": 5, "kolegij": "Interoperabilnost informacijskih sustava", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 6 }, { "id": 6, "kolegij": "Izrada aplikacija za mobilne uredžaje", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Izborni", "semestar": 5 }, { "id": 7, "kolegij": "Izrada završnog projekta/Praksa", "ects": 10, "sati": 0, "predavanja": 0, "vjezbe": 0, "tip": "Obavezni", "semestar": 6 }, { "id": 8, "kolegij": "Java Web Programiranje", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Izborni", "semestar": 6 }, { "id": 9, "kolegij": "Kineziološka kultura", "ects": 0, "sati": 30, "predavanja": 0, "vjezbe": 2, "tip": "Obavezni", "semestar": 1 }, { "id": 10, "kolegij": "Kineziološka kultura 2", "ects": 0, "sati": 30, "predavanja": 0, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 11, "kolegij": "Matematika 1", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 1 }, { "id": 12, "kolegij": "Matematika 2", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 13, "kolegij": "Objektno orijentirano programiranje", "ects": 6, "sati": 75, "predavanja": 2, "vjezbe": 3, "tip": "Obavezni", "semestar": 3 }, { "id": 14, "kolegij": "Objektno orijentirano programiranje - praktikum u .NET okolini", "ects": 5, "sati": 60, "predavanja": 1, "vjezbe": 3, "tip": "Obavezni", "semestar": 4 }, { "id": 15, "kolegij": "Oblikovanje baza podataka", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 3 }, { "id": 16, "kolegij": "Oblikovanje i izrada cjelovitog aplikativnog rješenja", "ects": 6, "sati": 60, "predavanja": 1, "vjezbe": 3, "tip": "Obavezni", "semestar": 6 }, { "id": 17, "kolegij": "Operacijski sustavi", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 18, "kolegij": "Organizacija i managem.net", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 5 }, { "id": 19, "kolegij": "Osnove digitalne elektronike", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 1 }, { "id": 20, "kolegij": "Osnove poslovne ekonomije", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 2 }, { "id": 21, "kolegij": "Osnove poslovnog komuniciranja", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 3 }, { "id": 22, "kolegij": "Poslovni informacijski sustavi", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 6 }, { "id": 23, "kolegij": "Pristup podacima iz programskog koda", "ects": 5, "sati": 60, "predavanja": 0, "vjezbe": 4, "tip": "Obavezni", "semestar": 5 }, { "id": 24, "kolegij": "Programiranje", "ects": 6, "sati": 75, "predavanja": 2, "vjezbe": 3, "tip": "Obavezni", "semestar": 1 }, { "id": 25, "kolegij": "Programiranje u Javi 1", "ects": 6, "sati": 75, "predavanja": 2, "vjezbe": 3, "tip": "Obavezni", "semestar": 4 }, { "id": 26, "kolegij": "Programiranje u Javi 2", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Izborni", "semestar": 5 }, { "id": 27, "kolegij": "Programsko inženjerstvo", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 5 }, { "id": 28, "kolegij": "Projektni menadžment", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 4 }, { "id": 29, "kolegij": "Projektni razvoj aplikacija", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 4 }, { "id": 30, "kolegij": "Računalna podrška uredskom poslovanju", "ects": 4, "sati": 45, "predavanja": 1, "vjezbe": 2, "tip": "Obavezni", "semestar": 1 }, { "id": 31, "kolegij": "Razvoj web aplikacija", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 4 }, { "id": 32, "kolegij": "Sigurnost informacijskih sustava 1", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 4 }, { "id": 33, "kolegij": "Standardi u primjeni inte.netske tehnologije", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 3 }, { "id": 34, "kolegij": "Strukture podataka i algoritmi", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 35, "kolegij": "Sustavi potpore odlučivanju", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Izborni", "semestar": 5 }, { "id": 36, "kolegij": "Upravljanje informacijskim sustavima", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 5 }, { "id": 37, "kolegij": "Uvod u baze podataka", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 38, "kolegij": "Uvod u računalne mreže", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 1 }, { "id": 39, "kolegij": "Vjerojatnost i statistika", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 3 }]
What I want is for each line, to create a row in the table with the correct data for each column. I am a beginner in the JS logic and I tried a few thing myself, but can't really get the hand of it yet.
EDIT2:
<html>
<head>
<title>Curriculum</title>
<link rel="stylesheet" href="style.css">
<script>
async function getData() {
let response_data = [
async function getData() {
const response = await fetch("https://www.fulek.com/data/api/supit/curriculum-list/hr", {
method: "GET",
headers: {
"Content-Type": "text/plain;charset=UTF-8",
Authorization:
"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MzIxMzUyLCJleHAiOjE2NzQzMjQ5NTIsImlhdCI6MTY3NDMyMTM1Mn0.fdSMzUEA_WYc5KGqXM2t2TPgpsBnabq5HPNZYCm1MJw",
},
});
const data = response.json()
return data.then(response => response.data);
}
];
console.log(response_data);
let li = `<tr><th>College</th><th>ECTS</th><th>Hours</th><th>Lection</th><th>Practice</th><th>Type</th></tr>`;
response_data.forEach((data) => {
li += `<tr>
<td>${data.kolegij}</td>
<td>${data.ects}</td>
<td>${data.sati}</td>
<td>${data.predavanja}</td>
<td>${data.vjezbe}</td>
<td>${data.tip}</td>`;
});
document.getElementById("table").innerHTML = li;
}
</script>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="project.html">Home</a></li>
<li><a href="AboutUs.html">About Us</a></li>
<li>
<div class="dropdown">
<a href="#">News</a>
<div class="dropdown-content">
<p>
<a href="News.WorldskillCompetition.html">Worldskill competition</a
>
</p>
<p><a href="#">Scholarship contest</a></p>
<p><a href="#">Algebra Junior</a></p>
</div>
</div>
</li>
<li><a href="#">Curriculum</a></li>
<li><a href="ContactForm.html">Contact</a></li>
</ul>
</div>
<h1>Curriculum</h1>
<hr />
<input type="text" , id="text" , name="text" />
<table id="table" width="800px">
<thead>
<tr>
<th width="200px">College</th>
<th>ECTS</th>
<th>Hours</th>
<th>Lection</th>
<th>Practice</th>
<th width="300px">Type</th>
</tr>
</thead>
<tbody>
<tr>
<td><button type="button" onclick="getData()">Delete</button></td>
<td>hello</td>
<td>test</td>
<td>test2</td>
<td>test3</td>
<td>test4</td>
<td>test5</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tfoot>
</table>
</body>
</html>
this is the code and the response is this:
2 answers
solution1
0 ACCPTED 2023-01-21 18:06:25
You need to modify your code little bit. Please refer below code Snippet.
HTML File: T able element only
<table id="table" width="800px">
<thead>
<tr>
<th width="200px">College</th>
<th>ECTS</th>
<th>Hours</th>
<th>Lection</th>
<th>Practice</th>
<th width="300px">Type</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<td>Test</td>
<td>hello</td>
<td>test</td>
<td>test2</td>
<td>test3</td>
<td>test4</td>
<td>test5</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tfoot>
If not needed you can remove static tr data from table body. I have added ID for tbody and append the data into it.
JS File: Modified and make it modularise.
/* To Call API and generate table function */
function getData() {
getDataFromAPI().then((response)=>{
response.data.forEach((data) => {
generateTableData(data)
});
})
}
/* TO generate Table Data */
function generateTableData(data){
var sel = document.querySelector('#table-body');
sel.innerHTML +=`<tr>
<td>${data.kolegij}</td>
<td>${data.ects}</td>
<td>${data.sati}</td>
<td>${data.predavanja}</td>
<td>${data.vjezbe}</td>
<td>${data.tip}</td>
</tr>`
}
/* To call an api function */
async function getDataFromAPI(){
const response = await fetch("https://www.fulek.com/data/api/supit/curriculum-list/hr", {
method: "GET",
headers: {
"Content-Type": "text/plain;charset=UTF-8",
Authorization:
"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MzIxMzUyLCJleHAiOjE2NzQzMjQ5NTIsImlhdCI6MTY3NDMyMTM1Mn0.fdSMzUEA_WYc5KGqXM2t2TPgpsBnabq5HPNZYCm1MJw",
},
})
return response.json();
}
I have removed Delete button and moved it to above table. You can pass it to anywhere you want.
<button type="button" onclick="getData()">Get Data</button>
Hope this is what you want. For live demo you can refer this JSFiddle .
solution2
-2 2023-01-21 15:52:10
The easiest way that i can imagine right now (for a beginner) is that you could try to create an empty Array in the beginning and then store the response that you get from your request in this array. Afterwards you can try to append the Data (eg with a loop) you got to the innerHTML of the divs that you already created.
To be honest, from personal experience i wouldn't recommend this way but regarding to the fact you are just beginning with HTML and JS it's a good way to get used to the fundemental stuff of HTML and JS.
See: How to fetch api data and display it
As SelVazi also commented, i would personally use Datatables to display the Data after you got more experience in working with HTML and JS.
I hope i could give you some inspirations of how you can solve your problem.
EDIT: Try this Solution regarding to my first suggestion: Of course you have to change the data to your response from the API.
<html> <head> <title>Curriculum</title> <script> let response_data = []; async function getData() { const response = await fetch( "https://www.fulek.com/data/api/supit/curriculum-list/hr", { method: "GET", headers: { "Content-Type": "text/plain;charset=UTF-8", Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MzIxMzUyLCJleHAiOjE2NzQzMjQ5NTIsImlhdCI6MTY3NDMyMTM1Mn0.fdSMzUEA_WYc5KGqXM2t2TPgpsBnabq5HPNZYCm1MJw", }, } ); let apiData = await response.json().then((res) => { let li = `<tr><th>College</th><th>ECTS</th><th>Hours</th><th>Lection</th><th>Practice</th><th>Type</th></tr>`; response_data.push(res.data); for (let i = 0; i < response_data[0].length; i++) { li += `<tr> <td>${response_data[0][i].kolegij}</td> <td>${response_data[0][i].ects}</td> <td>${response_data[0][i].sati}</td> <td>${response_data[0][i].predavanja}</td> <td>${response_data[0][i].vjezbe}</td> <td>${response_data[0][i].tip}</td>`; } document.getElementById("table").innerHTML = li; }); } </script> </head> <body> <div class="navbar"> <ul> <li><a href="project.html">Home</a></li> <li><a href="AboutUs.html">About Us</a></li> <li> <div class="dropdown"> <a href="#">News</a> <div class="dropdown-content"> <p> <a href="News.WorldskillCompetition.html" >Worldskill competition</a > </p> <p><a href="#">Scholarship contest</a></p> <p><a href="#">Algebra Junior</a></p> </div> </div> </li> <li><a href="#">Curriculum</a></li> <li><a href="ContactForm.html">Contact</a></li> </ul> </div> <h1>Curriculum</h1> <hr /> <input type="text", id="text", name="text" /> <table id="table" width="800px"> <thead> <tr> <th width="200px">College</th> <th>ECTS</th> <th>Hours</th> <th>Lection</th> <th>Practice</th> <th width="300px">Type</th> </tr> </thead> <tbody> <tr> <td><button type="button" onclick="getData()">Delete</button></td> <td>hello</td> <td>test</td> <td>test2</td> <td>test3</td> <td>test4</td> <td>test5</td> </tr> </tbody> <tfoot> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tfoot> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Get Data from API response and show in table
How to get data from https.get response in node js
How to get data from api response in Angular
How to render data from a API response in a table using react js
Angular 2: How to GET service response data from API to the Select Option
How to Get Response Data XML From Request API?
How to create a javascript table and get a calculations from input as table data
How to pull a API Response data into a HTML Table
How to fetch get data from API and render data in a table?
How to get the response data from API and code the function from data to get the result using node js JavaScript
Related Tags