JavaScript无法访问列表内字典：循环为何取到字符而非字典

核心原因 #

你后端渲染到模板的餐厅数据是字符串格式，而非JavaScript可识别的数组/对象，所以前端循环时会把整个字符串当成字符序列遍历，第一个字符自然是[。

具体修复步骤 #

1. 后端确保数据以JSON格式传递 #

在app.py中，渲染模板时将Python列表序列化为JSON字符串：

# 假设餐厅数据存储在restaurants列表中
from flask import render_template
import json

# 渲染模板时用json.dumps转换数据格式
return render_template('results.html', restaurants=json.dumps(restaurants))

2. 前端解析字符串为JS数组 #

在results.html中，先把后端传来的字符串转成JS可识别的数组再循环：

<script>
// 解析JSON字符串为JS数组，|safe过滤器避免引号被转义
const restaurants = JSON.parse('{{ restaurants|safe }}');
// 正常遍历数组并添加地图标记
restaurants.forEach(restaurant => {
    console.log(restaurant);
    // Leaflet标记逻辑
    L.marker([restaurant.lat, restaurant.lng])
      .addTo(map)
      .bindPopup(restaurant.name || '未知餐厅');
});
</script>

注意：必须添加|safe过滤器，否则模板会自动转义JSON中的引号，导致JSON.parse解析失败。

3. 排查渲染细节 #

如果后端已做正确序列化，检查模板是否存在额外操作：

• 不要手动给渲染变量加外层引号，JSON.parse会处理字符串包裹逻辑
• 确认后端没有重复调用json.dumps，避免数据被多次转义

验证方法 #

在前端添加调试代码确认数据格式：

console.log(typeof restaurants); // 正确结果应为"object"
console.log(restaurants); // 应显示包含餐厅对象的数组

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