如何在从Flask传递到Javascript时保留列表中字典的键顺序

问题的核心在于JSON规范本身不保证对象键的顺序，不同解析器或运行环境可能会自动对键进行排序。结合你使用Python 3.8（字典默认保持插入顺序）的场景，这里提供几种可靠的解决思路：

方案1：将有序字典转换为键值对数组（推荐） #

最稳妥的方式是在Python端把需要保留顺序的values字典转换成键值对数组，这样前端拿到的是天然有序的数组结构，完全不存在顺序丢失的问题。

Python端处理代码 #

假设你用Flask渲染模板，先对原始列表做转换：

def transform_ordered_dicts(data):
    for group in data:
        updated_charts = []
        for chart in group['charts']:
            # 针对values字段做转换
            if 'values' in chart and isinstance(chart['values'], dict):
                # 把字典转成[key, value]格式的数组
                chart['values'] = list(chart['values'].items())
            updated_charts.append(chart)
        group['charts'] = updated_charts
    return data

# 处理后再传递给模板
processed_charts = transform_ordered_dicts(original_charts_list)

前端解析与使用 #

拿到数据后，你可以直接按数组顺序遍历，也可以转成Map来保留顺序并方便键值访问：

var charts = JSON.parse('{{ processed_charts|tojson }}');

charts.forEach(chartGroup => {
    chartGroup.charts.forEach(chart => {
        if (Array.isArray(chart.values)) {
            // 转成Map，既保留顺序又能快速按键取值
            const valueMap = new Map(chart.values);
            // 遍历Map，顺序完全和原Python字典一致
            valueMap.forEach((value, key) => {
                console.log(`${key}: ${value}`);
            });
        }
    });
});

方案2：依赖现代JS环境的对象顺序（无需修改Python结构） #

Python 3.7+的json.dumps默认会保留字典的插入顺序（sort_keys=False是默认配置），只要你的模板tojson过滤器没有开启sort_keys=True，生成的JSON字符串里的键顺序就和原字典一致。

在支持ES2015+的现代浏览器中，当对象的键是非整数格式的字符串时，遍历对象键会严格遵循JSON中的出现顺序。比如：

const obj = JSON.parse('{"= 1":0, "[1; 4]":18, "[5; 8]":0}');
Object.keys(obj); // 输出 ["= 1", "[1; 4]", "[5; 8]"]，顺序和JSON完全一致

但这种方式有两个局限：

• 兼容性差：旧浏览器（如IE）不保证对象键的顺序
• 如果键是可被解析为整数的字符串（比如"123"），JS会优先将这类键排序到前面

如果你的键都是非整数字符串，且不需要兼容旧环境，这个方案可以直接使用，但方案1的通用性更强。

方案3：用第三方JSON解析库强制保序 #

如果不想修改Python端结构，可以引入第三方库（如json5）来解析JSON，这类库会严格保留键的顺序。不过引入额外库会增加项目复杂度，除非必要不推荐。

示例代码：

// 先安装依赖：npm install json5
const JSON5 = require('json5');

var charts = JSON5.parse('{{ charts|tojson }}');
// 此时charts内的对象键顺序与JSON字符串完全一致

内容的提问来源于stack exchange，提问作者damien le borgne