如何将Python字典数据传递给JavaScript实现动态地图更新

问题背景 #

我有一个Python+JavaScript的应用，连接PostgreSQL数据库存储各国用户数据。server.py负责查询数据，返回类似{'US':2,'CA':5}的字典，需要把这个动态数据传给map.js来渲染世界地图，每次加载地图都要获取最新数据。现在需要替换map.js里硬编码的var data，但不清楚如何用Python生成JSON响应，以及如何在JavaScript中正确调用接口获取数据。

解决方案步骤 #

1. Python端：返回标准JSON响应

Flask可以通过jsonify工具将字典转换为标准JSON响应，确保前端能正确解析。修改server.py代码如下：

from flask import jsonify  # 导入jsonify工具

@app.route("/map")
def show_mapjs():
    country_count = {
        "US": 0, "CA": 0,
    }

    for country_code, _ in country_count.items():
        records_count = User_Records.query.filter_by(country_code=country_code).count()
        country_count[country_code] = records_count
    print(f"=== {country_count}")
    return jsonify(country_count)  # 用jsonify返回JSON格式响应

关键点：

• jsonify会自动设置Content-Type: application/json响应头，让前端识别这是JSON数据。
• 原代码中session.get("country_code")未被使用，可根据实际需求保留或删除。

2. JavaScript端：异步获取并转换数据

修改map.js，通过fetch异步请求/map接口获取最新数据，再将数据转换为anychart地图需要的格式：

anychart.onDocumentReady(async function () {
    // 异步请求服务器获取最新国家数据
    const response = await fetch('/map');
    const countryData = await response.json();
    
    // 将{US:5, CA:2}格式转换为anychart要求的数组结构
    var data = Object.entries(countryData).map(([id, value]) => ({id, value}));

    var dataSet = anychart.data.set(data);
    var mapData = dataSet.mapAs({ description: 'description' });
    var map = anychart.map();
    
    // 补充地图渲染的必要逻辑（示例）
    map.geodata('anychart.maps.world'); // 设置地图数据源
    map.series(mapData); // 绑定数据
    map.container('container'); // 指定渲染容器
    map.draw(); // 渲染地图
});

关键点：

• 使用async/await处理fetch的异步操作，确保数据获取完成后再渲染地图。
• Object.entries()将字典的键值对转换为数组，再通过map()转换为anychart需要的{id, value}对象格式。
• 每次页面加载或地图初始化时，都会重新请求接口获取最新数据，满足用户活动更新后的实时性需求。

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