'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