'Insert fetched data at a certain column in HTML Table
Im working on a cinema project and I've reached the point where
This is currently my html. Im using fetch api to get the data, but I want to insert all showings for mondays in the monday column.
<table>
<thead id="table_head">
<tr>
<th id="monday">Monday</th>
<th id="tuesday">Tuesday</th>
<th id="wednesday">Wednesday</th>
<th id="thursday">Thursday</th>
<th id="friday">Friday</th>
<th id="saturday">Saturday</th>
<th id="sunday">Sunday</th>
</tr>
</thead>
<tbody id="table_body"></tbody>
</table>
Currently this is my fetch function:
function getParams(match){
const movieId = match?.params?.id
const table_body = document.getElementById("table_body")
const saturday = document.getElementById("saturday")
console.log(saturday)
try {
fetch(SERVER)
.then(response => handleHttpErrors(response))
.then(data => {
for (let i = 0; i < data.length; i++){
if (data[i].startWeekday === "SATURDAY"){
let tr = document.createElement("tr")
let startTime = document.createElement("p")
startTime.innerText = data[i].startTime
tr.innerText = data[i].startWeekday
tr.appendChild(startTime)
table_body.appendChild(tr)
}
}
})
} catch (error){
console.error(error)
}
And this is my JSON response:
{
"id": 5,
"movie": {
"id": "myid1",
"title": "Encanto",
"category": "Animation, Comedy, Family, Fantasy",
"minimumAge": null,
"duration": "1h 42m",
"releaseDate": null,
"rating": 0.77,
"picture": "https://www.themoviedb.org/t/p/w1280/4j0PNHkMr5ax3IA8tjtxcmPU3QT.jpg",
"trailer": "https://www.youtube.com/watch?v=CaimKeDcudo",
"tagline": null,
"plot": null
},
"room": {
"id": 1,
"description": "Sal #1"
},
"startDateTime": "2022-05-14T19:00:00",
"startDate": "2022-05-14",
"startTime": "19:00:00",
"startWeekday": "SATURDAY",
"basePrice": 69
},
Im stuck at, how I insert the specified data at a given point in the table. Hope to find some help.
Kind regards
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
