Trying to make a table in HTML using Flask and with data from SQL

I was trying to make a table in HTML using data from my database to populate the table. However, the table is showing up but there is no data present in the table. Can you guys please help?

This is my HTML Code with javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        color:#fff;
            }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th>worker_id</th>
        <th>wokrer_name</th>
        <th>worker_type</th>
        <th>regular_hours</th>
        <th>hourly_rate</th>
        <th>overtime_rate</th>
    </tr>

    <tbody id="myTable">
        
    </tbody>
</table>

<script>
    var myArray = JSON.parse("{JSON_data}")
    
    buildTable(myArray)



    function buildTable(data){
        var table = document.getElementById('myTable')

        for (var i = 0; i < data.length; i++){
            var row = `<tr>
                            <td>${data[i].worker_id}</td>
                            <td>${data[i].worker_name}</td>
                            <td>${data[i].worker_type}</td>
                            <td>${data[i].regular_hours}</td>
                            <td>${data[i].hourly_rate}</td>
                            <td>${data[i].overtime_rate}</td>
                      </tr>`
            table.innerHTML += row


        }
    }

</script>

This is my Python Code

@app.route("/view_worker")
def view_worker():
  f = open("templates/view_worker.html")
  page = f.read()
  f.close()
  cursor.execute("""
    SELECT
      *
    FROM workers
  """,
  )
  data = cursor.fetchall()
  worker_data = []
  for row in data:
    worker = {"worker_id":row[0], "worker_name":row[1], "worker_type":row[2], "regular_hours":row[3], "hourly_rate":row[4], "overtime_rate":row[5]}
    worker_data.append(worker)
  worker_data = json.dumps(worker_data)
  page = page.replace("{JSON_data}", worker_data)
  return page

I am pretty new to python and html and I know nothing about javascript. I just saw a youtube tutorial on javascript and tried to reverse engineer his code to suit my needs.

I wanted tried to make a table which will show data in my database and dynamically become larger/smaller with the amount of data in the database. But sadly, it is not working and I have no clue on how to solve this.

If it helps, in the youtube tutorial, the array used was:

[
        {'name':'Michael', 'age':'30', 'birthdate':'11/10/1989'},
        {'name':'Mila', 'age':'32', 'birthdate':'10/1/1989'},
        {'name':'Paul', 'age':'29', 'birthdate':'10/14/1990'},
        {'name':'Dennis', 'age':'25', 'birthdate':'11/29/1993'},
        {'name':'Tim', 'age':'27', 'birthdate':'3/12/1991'},
        {'name':'Erik', 'age':'24', 'birthdate':'10/31/1995'},
    ]

And this was added directly in the html code rather than putting it in. I think this may be the mistake in my code as the data may not be in the correct format