Динамическое преобразование таблицы json в html ⇐ Jquery

[Anonymous]

Я новичок в HTML и веб-разработке. Попытка создать веб-сайт, на котором скрипт Python на стороне сервера возвращает json, который необходимо отобразить в виде таблицы на веб-странице. Поля в json могут каждый раз различаться, поэтому таблицу необходимо создавать динамически, включая поля заголовков/столбцов.
Я знаю, что могу использовать javascript или jquery, но не могу написать правильные код
Json выглядит следующим образом: это кадр данных pandas, преобразованный в json с помощью df.to_json(orient="records")
[{"Date":"2024-01-11","Market":"USA","Region":"East","Prod":"Long","param1":0.0415,"param2":0.0382,"param3":0.1701,"param4":6.3892,"param5":3.8563,"param6":2.7315,"StockLevel":"InStock"},{"Date":"2024-01-12","Market":"USA","Region":"East","Prod":"Long","param1":0.0447,"param2":0.0418,"param3":0.1724,"param4":6.7594,"param5":4.2461,"param6":2.9409,"StockLevel":"InStock"},{"Date":"2024-01-16","Market":"USA","Region":"East","Prod":"Long","param1":0.0506,"param2":0.0465,"param3":0.1756,"param4":7.4431,"param5":4.7551,"param6":3.2096,"StockLevel":"InStock"},{"Date":"2024-01-17","Market":"USA","Region":"East","Prod":"Long","param1":0.0523,"param2":0.05,"param3":0.1783,"param4":7.6712,"param5":5.109,"param6":3.4229,"StockLevel":"InStock"},{"Date":"2024-01-18","Market":"USA","Region":"South","Prod":"Long","param1":0.0551,"param2":0.0539,"param3":0.1814,"param4":7.7536,"param5":5.3988,"param6":3.6171,"StockLevel":"InStock"},{"Date":"2024-01-19","Market":"USA","Region":"East","Prod":"Long","param1":0.0623,"param2":0.0596,"param3":0.1858,"param4":8.6556,"param5":5.9864,"param6":3.9416,"StockLevel":"InStock"},{"Date":"2024-01-22","Market":"USA","Region":"East","Prod":"Long","param1":0.0658,"param2":0.0644,"param3":0.19,"param4":9.8681,"param5":6.7187,"param6":4.3345,"StockLevel":"InStock"},{"Date":"2024-01-23","Market":"USA","Region":"East","Prod":"Long","param1":0.0671,"param2":0.0685,"param3":0.1939,"param4":10.5417,"param5":7.2909,"param6":4.6767,"StockLevel":"InStock"},{"Date":"2024-01-24","Market":"USA","Region":"West","Prod":"Long","param1":0.0702,"param2":0.0732,"param3":0.1985,"param4":11.517,"param5":7.992,"param6":5.0838,"StockLevel":"InStock"},{"Date":"2024-01-25","Market":"USA","Region":"West","Prod":"Long","param1":0.071,"param2":0.0772,"param3":0.2029,"param4":12.1621,"param5":8.5937,"param6":5.4606,"StockLevel":"InStock"},{"Date":"2024-01-26","Market":"USA","Region":"East","Prod":"Long","param1":0.0682,"param2":0.0797,"param3":0.2065,"param4":12.4307,"param5":9.0514,"param6":5.7872,"StockLevel":"InStock"},{"Date":"2024-03-07","Market":"USA","Region":"South","Prod":"Long","param1":0.0941,"param2":0.1447,"param3":0.3495,"param4":16.0539,"param5":15.2252,"param6":12.9338,"StockLevel":"InStock"},{"Date":"2024-03-08","Market":"USA","Region":"West","Prod":"Long","param1":0.0877,"param2":0.145,"param3":0.3545,"param4":15.6296,"param5":15.1376,"param6":13.0054,"StockLevel":"InStock"}]

Сейчас он отображается в формате JSON только с использованием приведенного ниже HTML. Код создания динамической таблицы не работает





Output



Form Submission Result




// Get the result from the query parameter in the URL
var result = new URLSearchParams(window.location.search).get('result');

// create dynamic table
/*
const dbParam = result.stringify({table:"Output",limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = result.parse(this.responseText);
let text = ""
for (let x in myObj) {
text += "" + myObj[x].name + "";
}
text += ""
document.getElementById("outputFrame").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_html_table.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
*/

// Display the result in the output frame
document.getElementById('outputFrame').innerHTML = result;






Подробнее здесь: https://stackoverflow.com/questions/781 ... ynamically