如何用Python Flask将电影推荐JSON转为HTML表格并展示为网页

方法1：手动构建HTML表格（最可靠，规避第三方工具问题） #

既然你提到json2html无效，直接通过Flask模板手动生成表格是最稳妥的方案，步骤如下：

1. 项目结构 #

movie_recommendation/
├── app.py
└── templates/
    └── movies.html

2. Flask后端代码（app.py） #

这里模拟获取你的电影推荐JSON数据，再传递给前端模板：

from flask import Flask, render_template

app = Flask(__name__)

# 模拟电影推荐功能返回的JSON数据
def get_movie_recommendations():
    return [
        {
            "id": 601,
            "imdb_id": "tt0068646",
            "imdb_rating": "9.2",
            "language": "English, Italian, Latin",
            "poster": "https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg",
            "title": "The Godfather",
            "year": 1972
        },
        {
            "id": 603,
            "imdb_id": "tt0071562",
            "imdb_rating": "9.0",
            "language": "English, Italian, Spanish, Latin, Sicilian",
            "poster": "https://m.media-amazon.com/images/M/MV5BMWMwMGQzZTItY2JlNC00OWZiLWIyMDctNDk2ZDQ2YjRjMWQ0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg",
            "title": "The Godfather Part II",
            "year": 1974
        },
        {
            "id": 622,
            "imdb_id": "tt0108052",
            "imdb_rating": "9.0",
            "language": "English, Hebrew, German, Polish, Latin",
            "poster": "https://m.media-amazon.com/images/M/MV5BNDE4OTMxMTctNmRhYy00NWE2LTg3YzItYTk3M2UwOTU5Njg4XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg",
            "title": "Schindler's List",
            "year": 1993
        }
    ]

@app.route('/')
def show_movies():
    movies = get_movie_recommendations()
    # 获取表头（取第一条数据的键名）
    headers = movies[0].keys() if movies else []
    return render_template('movies.html', movies=movies, headers=headers)

if __name__ == '__main__':
    app.run(debug=True)

3. HTML模板（templates/movies.html） #

在模板中循环生成表头和表格内容，还能直接展示海报图片：

<!DOCTYPE html>
<html>
<head>
    <title>电影推荐</title>
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        img {
            max-width: 100px;
            height: auto;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;">电影推荐列表</h1>
    {% if movies %}
    <table>
        <thead>
            <tr>
                {% for header in headers %}
                <th>{{ header|capitalize }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for movie in movies %}
            <tr>
                <td>{{ movie.id }}</td>
                <td>{{ movie.imdb_rating }}</td>
                <td>{{ movie.language }}</td>
                <td><img src="{{ movie.poster }}" alt="{{ movie.title }}"></td>
                <td>{{ movie.title }}</td>
                <td>{{ movie.year }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="text-align:center;">暂无推荐电影</p>
    {% endif %}
</body>
</html>

方法2：修复json2html的使用（若坚持用第三方工具） #

之前json2html无效大概率是使用方式错误，试试以下步骤：

1. 安装依赖：

pip install json2html flask

2. 修改app.py代码：

from flask import Flask, render_template_string
from json2html import json2html

app = Flask(__name__)

def get_movie_recommendations():
    # 同上的电影数据
    return [
        # ... 省略重复的电影数据 ...
    ]

@app.route('/')
def show_movies():
    movies = get_movie_recommendations()
    # 转换JSON为HTML表格
    table_html = json2html.convert(json=movies)
    # 渲染模板时要关闭HTML转义
    return render_template_string('''
        <!DOCTYPE html>
        <html>
        <head>
            <title>电影推荐</title>
            <style>
                table { border-collapse: collapse; width: 80%; margin: 20px auto; }
                th, td { border:1px solid #ddd; padding:8px; text-align:left; }
                th { background:#f2f2f2; }
                img { max-width:100px; height:auto; }
            </style>
        </head>
        <body>
            <h1 style="text-align:center;">电影推荐列表</h1>
            {{ table_html|safe }}
        </body>
        </html>
    ''', table_html=table_html)

if __name__ == '__main__':
    app.run(debug=True)

关键是要加|safe过滤器，否则Flask会自动转义HTML代码，导致表格无法正常渲染。

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