how to pass the query result in view.py to Bootstrap-table

i use pymysql to get data from my database

conn = pymysql.connect(
        host='localhost',
        user='root',
        password='xxxxxxxxxx',
        database='TCR',
        charset='utf8mb4',
        cursorclass=pymysql.cursors.DictCursor,
    )
cur = conn.cursor()
result = cur.excute('SELECT * FROM TCR')
data = cur.fetchall()

Then i return ‘data’ to my HTML file

in HTML file i use Bootstrap-tabel to display my table. i notice that js part needs a .json file to fetch the data.
such as:

$('#table').bootstrapTable({
  url: 'data1.json',
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }]
})

but i don`t want to use .json, i want to use the variable ‘data’ in js. How do I convert data to a form acceptable to bootstrap-table?

i tried this

<div id="data-container" data-query-results = {{ data }} ></div>


<div id="reportTableDiv" >
        <table id="reportTable"></table>
    </div>
    <script type="text/javascript">
    text  = document.getElementById('data-container').getAttribute('data-query-results');
    console.log(text)
    var datas  = JSON.parse(text);

but i got an error when i use JSON.parase()

Uncaught SyntaxError: Expected property name or ‘}’ in JSON at position 2 (line 1 column 3)
at JSON.parse ()

Is there an easier way to achieve my purpose?