我是 html 和 web 开发的新手。尝试构建一个网站，其中服务器端 python 脚本返回 json，需要在网页上显示为表格。 json 中的字段每次都可能不同，因此需要动态构建表，包括标题/列字段。
我知道我可以使用 javascript 或 jquery，但无法编写正确的代码 json 如下所示： 它是使用 df.to_json(orient="records") 转换为 json 的 pandas 数据框
[{"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"}]
现在它仅使用下面的 html 显示为 json。创建动态表的代码不起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output</title>
</head>
<body>
<div class="container">
<h2>Form Submission Result</h2>
<div id="outputFrame" class="output-frame"></div>
</div>
<script>
// 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 = "<table border='1'>"
for (let x in myObj) {
text += "<tr><td>" + myObj[x].name + "</td></tr>";
}
text += "</table>"
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;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output</title>
</head>
<body>
<div class="container">
<h2>Form Submission Result</h2>
<div id="outputFrame" class="output-frame"></div>
</div>
<script>
// Hard-coded JSON data
var jsonData = [{
"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-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"
}
];
// Create a new table
var table = document.createElement('table');
table.style.width = '100%';
table.setAttribute('border', '1');
// Create the header row
var headerRow = table.insertRow(-1);
// Extract headers by taking the keys of the first object in the array
var headers = Object.keys(jsonData[0]);
headers.forEach(function(header) {
var cell = headerRow.insertCell(-1);
cell.innerHTML = header;
});
// Populate the table with rows from the JSON data
jsonData.forEach(function(row) {
var tr = table.insertRow(-1);
headers.forEach(function(header) {
var cell = tr.insertCell(-1);
cell.innerHTML = row[header];
});
});
// Append the table to the output frame
document.getElementById('outputFrame').appendChild(table);
</script>
</body>
</html>使用 JSON 对象中的键添加标题行以创建列标题。 为数组中的每个对象添加一行，并用值填充单元格。