JavaScript遍历字典列表问题：Python传数据后遍历字符而非字典

问题场景 #

我通过Python执行SQL查询获取数据并整理为字典列表，数据格式示例：

data = [{
    "jour_de_la_semaine": "0",
    "nom_rue": "Avenue Rogier",
    "total_lourd": 4464.676489954501,
    "total_pieton": 366.75719346780005,
    "total_velo": 1530.4361518144,
    "total_voiture": 16283.220910553997
}, {
    "jour_de_la_semaine": "1",
    "nom_rue": "Avenue Rogier",
    "total_lourd": 4689.496674622601,
    "total_pieton": 719.5071498280998,
    "total_velo": 6835.787324285102,
    "total_voiture": 22114.002369259702
}]

通过模板传递到JavaScript时使用了以下代码：

var data = '{{ all_data_rue|tojson }}';

console.log(data)能显示完整数据，但遍历操作会逐个返回字符，无法按字典对象遍历。

问题根源 #

{{ all_data_rue|tojson }}输出的是合法JSON格式的字符串，但用单引号包裹后，JavaScript会将data识别为字符串类型，而非JSON对象/数组，所以遍历时会按字符拆分。

可行解决方法 #

方法一：直接赋值（推荐） #

去掉包裹的单引号，因为tojson已经生成合法的JSON语法，直接赋值给变量即可被JavaScript识别为对象：

var data = {{ all_data_rue|tojson }};

方法二：手动解析JSON字符串 #

如果因模板规则必须保留引号，可通过JSON.parse()将字符串转换为对象：

var dataStr = '{{ all_data_rue|tojson|safe }}';
var data = JSON.parse(dataStr);

• 加上|safe过滤器是为了避免模板对JSON字符串进行额外转义，保证解析正常。

验证与遍历 #

修改后用console.log(typeof data)查看类型，结果应为object（数组属于object类型）。之后即可正常遍历：

data.forEach(item => {
    console.log(item.nom_rue, item.total_voiture);
});

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