如何动态将Python返回的JSON数据转换为HTML表格？

问题背景 #

作为HTML与Web开发新手，搭建网站时遇到以下需求：

• 后端Python脚本返回由pandas DataFrame通过df.to_json(orient="records")生成的JSON数据
• 需要在网页上动态构建包含表头的表格（JSON字段不固定，无法提前写死表头）
• 可使用JavaScript或jQuery，但现有代码仅能显示JSON文本，无法生成表格

提供的JSON示例 #

[{"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"}]

原有失效代码 #

<!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>

解决方案 #

原有代码的核心问题：

1. 错误尝试通过XMLHttpRequest重新请求数据，但JSON已通过URL参数传递到页面
2. 混淆了JSON.parse()/JSON.stringify()的用法（直接调用result.parse是错误的）
3. 未处理动态表头，且硬编码了不存在的name字段

以下是修正后的原生JavaScript实现，无需额外依赖：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Output</title>
    <style>
        /* 可选：给表格加基础样式，提升可读性 */
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Form Submission Result</h2>
        <div id="outputFrame" class="output-frame"></div>
    </div>

    <script>
        // 获取URL参数中的JSON数据
        const resultParam = new URLSearchParams(window.location.search).get('result');
        
        // 解析JSON，处理可能的解析错误
        let data;
        try {
            data = JSON.parse(resultParam);
        } catch (error) {
            document.getElementById('outputFrame').innerHTML = '<p>无效的JSON数据</p>';
            console.error('JSON解析错误:', error);
            return;
        }

        // 如果数据为空，提示信息
        if (!data || data.length === 0) {
            document.getElementById('outputFrame').innerHTML = '<p>暂无数据</p>';
            return;
        }

        // 生成表格
        const table = document.createElement('table');
        
        // 生成表头：从第一个数据对象的键获取表头字段
        const headerRow = document.createElement('tr');
        const headers = Object.keys(data[0]);
        headers.forEach(headerText => {
            const th = document.createElement('th');
            th.textContent = headerText;
            headerRow.appendChild(th);
        });
        table.appendChild(headerRow);

        // 生成表格内容行
        data.forEach(item => {
            const row = document.createElement('tr');
            headers.forEach(header => {
                const td = document.createElement('td');
                td.textContent = item[header];
                row.appendChild(td);
            });
            table.appendChild(row);
        });

        // 将表格插入到页面中
        document.getElementById('outputFrame').appendChild(table);
    </script>
    
</body>
</html>

代码说明 #

1. JSON解析与错误处理：用try-catch包裹解析过程，避免无效JSON导致页面崩溃
2. 动态表头生成：通过Object.keys(data[0])获取第一个数据对象的所有键作为表头，适配可变字段
3. 内容行生成：遍历每个数据项，根据表头字段依次填充单元格内容
4. 基础样式优化：添加简单CSS使表格更美观（可根据需求自定义）

jQuery版本（可选） #

如果偏好使用jQuery，可替换为以下脚本部分：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function() {
        const resultParam = new URLSearchParams(window.location.search).get('result');
        let data;
        try {
            data = JSON.parse(resultParam);
        } catch (error) {
            $('#outputFrame').html('<p>无效的JSON数据</p>');
            console.error('JSON解析错误:', error);
            return;
        }

        if (!data || data.length === 0) {
            $('#outputFrame').html('<p>暂无数据</p>');
            return;
        }

        let table = $('<table>');
        // 生成表头
        let headerRow = $('<tr>');
        const headers = Object.keys(data[0]);
        headers.forEach(header => {
            headerRow.append($('<th>').text(header));
        });
        table.append(headerRow);

        // 生成内容行
        data.forEach(item => {
            let row = $('<tr>');
            headers.forEach(header => {
                row.append($('<td>').text(item[header]));
            });
            table.append(row);
        });

        $('#outputFrame').append(table);
    });
</script>

内容的提问来源于stack exchange，提问作者Nish