如何将Python的JSON对象转换为HTML表格？Flask场景适配

嘿，我来帮你搞定这个需求！结合你现有处理shapefile的Flask代码，我们可以通过后端传递数据到Jinja2模板，在模板中渲染表格的方式实现，步骤很清晰：

1. 修改Flask视图函数，传递原始数据而非JSON字符串 #

你当前的代码已经把shapefile转换成了GeoJSON格式的Feature列表（buffer变量），不需要先转成JSON字符串，直接把表头字段和Feature数据传给模板即可：

from flask import Flask, render_template
import shapefile
import json

app = Flask(__name__)

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    reader = shapefile.Reader("./uploads/"+filename)
    fields = reader.fields[1:]
    field_names = [field[0] for field in fields]
    buffer = []
    for sr in reader.shapeRecords():
        atr = dict(zip(field_names, sr.record))
        geom = sr.shape.__geo_interface__
        buffer.append(dict(type="Feature", geometry=geom, properties=atr))
    
    # 直接传递表头和Feature数据给模板，不用转JSON字符串
    return render_template('view_shapefile.html', field_names=field_names, features=buffer)

2. 在Jinja2模板中渲染HTML表格 #

创建对应的模板文件（比如templates/view_shapefile.html），利用Jinja2的循环语法遍历数据生成表格：

<!DOCTYPE html>
<html>
<head>
    <title>Shapefile Data Table</title>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h2>Shapefile 属性表格</h2>
    <table>
        <!-- 表头 -->
        <thead>
            <tr>
                {% for field in field_names %}
                    <th>{{ field }}</th>
                {% endfor %}
            </tr>
        </thead>
        <!-- 表格内容 -->
        <tbody>
            {% for feature in features %}
                <tr>
                    {% for field in field_names %}
                        <td>{{ feature.properties[field] }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>

为什么这么做？ #

• 你的buffer列表里每个元素都是一个Feature对象，其中properties字段就是shapefile里的属性数据，对应表格的一行
• field_names是从shapefile字段中提取的表头，正好用来生成表格的列标题
• 用Jinja2在后端渲染表格比前端用JS处理更简单，也更符合Flask的开发习惯

如果之后需要同时展示地理几何数据（比如地图），再考虑把GeoJSON传给前端用Leaflet等库渲染即可。

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