如何在Flask中用Jquery将Json数据转为合并重复项的表格？

既然你更倾向用Python实现核心的库存合并逻辑，我们可以把相同价格的库存求和操作放在Flask后端完成，前端只负责简单渲染表格并控制显示，这样能最大程度减少JS代码量。

第一步：Python端处理数据 #

用collections.defaultdict来统计相同价格的库存总和，逻辑简单清晰：

from collections import defaultdict

def process_stock_data(raw_data):
    # 初始化字典，键为价格，值自动初始化为0
    price_stock_map = defaultdict(int)
    for item in raw_data:
        # 累加相同价格的库存
        price_stock_map[item["price"]] += item["stock"]
    # 把字典转为列表，方便前端处理
    return [{"price": price, "total_stock": total} for price, total in price_stock_map.items()]

第二步：Flask后端对接 #

根据你获取数据的方式，分两种场景：

场景1：直接渲染模板时传递数据 #

如果数据是页面加载时就拿到的，直接在视图函数处理后传给模板：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 这里替换成你实际获取原始JSON数据的逻辑（比如数据库查询、第三方接口调用）
    raw_stock_data = [
        {"price": 0.1, "stock": 3000},
        {"price": 0.1, "stock": 4447},
        {"price": 0.2, "stock": 1500},
        {"price": 0.3, "stock": 2000},
        {"price": 0.2, "stock": 500}
    ]
    # 处理数据
    processed_data = process_stock_data(raw_stock_data)
    # 传给模板
    return render_template('stock_table.html', stock_data=processed_data)

对应的模板stock_table.html，表格默认隐藏，页面加载完成后显示：

<!DOCTYPE html>
<html>
<head>
    <title>库存价格统计</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #stock-table { display: none; }
        table { border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f5f5f5; }
    </style>
</head>
<body>
    <h2>库存价格汇总表</h2>
    <table id="stock-table">
        <thead>
            <tr>
                <th>价格</th>
                <th>总库存</th>
            </tr>
        </thead>
        <tbody>
            {% for item in stock_data %}
            <tr>
                <td>{{ item.price }}</td>
                <td>{{ item.total_stock }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <script>
        // 页面加载完成后显示表格
        $(document).ready(function() {
            $('#stock-table').show();
        });
    </script>
</body>
</html>

场景2：AJAX异步获取数据 #

如果是通过JS异步请求获取数据，后端提供一个接口返回处理好的JSON：

from flask import Flask, jsonify, render_template

app = Flask(__name__)

# 复用之前的process_stock_data函数
from collections import defaultdict
def process_stock_data(raw_data):
    price_stock_map = defaultdict(int)
    for item in raw_data:
        price_stock_map[item["price"]] += item["stock"]
    return [{"price": price, "total_stock": total} for price, total in price_stock_map.items()]

@app.route('/')
def index():
    return render_template('ajax_stock_table.html')

@app.route('/api/get-stock-data')
def get_stock_data():
    # 替换成你实际获取原始数据的逻辑
    raw_stock_data = [
        {"price": 0.1, "stock": 3000},
        {"price": 0.1, "stock": 4447},
        {"price": 0.2, "stock": 1500},
        {"price": 0.3, "stock": 2000},
        {"price": 0.2, "stock": 500}
    ]
    processed_data = process_stock_data(raw_stock_data)
    return jsonify(processed_data)

对应的模板ajax_stock_table.html，表格默认隐藏，拿到数据后渲染并显示：

<!DOCTYPE html>
<html>
<head>
    <title>库存价格统计</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #stock-table { display: none; }
        table { border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f5f5f5; }
    </style>
</head>
<body>
    <h2>库存价格汇总表</h2>
    <table id="stock-table">
        <thead>
            <tr>
                <th>价格</th>
                <th>总库存</th>
            </tr>
        </thead>
        <tbody id="table-body">
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            // 异步请求后端接口
            $.get('/api/get-stock-data', function(data) {
                // 渲染表格行
                const tbody = $('#table-body');
                $.each(data, function(index, item) {
                    const row = $('<tr>');
                    row.append($('<td>').text(item.price));
                    row.append($('<td>').text(item.total_stock));
                    tbody.append(row);
                });
                // 渲染完成后显示表格
                $('#stock-table').show();
            });
        });
    </script>
</body>
</html>

说明 #

• 核心的库存合并逻辑完全在Python端实现，你不需要写复杂的JS处理逻辑
• 表格默认通过CSS设置为display: none，只有在拿到数据（或页面加载完成）后才显示，符合你的需求
• 代码里的原始数据可以替换成你实际获取的JSON数据来源（比如数据库查询结果、其他接口返回值）

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