通过Flask传入HTML的列表数据，如何在JavaScript中获取第i个元素？

根本原因 #

Jinja模板的渲染逻辑在服务端执行，而你的JavaScript代码是在用户浏览器端执行，两者执行时机完全分离。你在Jinja语法{{ }}中直接使用JavaScript的循环变量i时，服务端渲染阶段i还没有被定义，所以会抛出list object has no element Undefined的错误。

解决方案 #

你不需要拆分数据逐个传递，直接用Jinja内置的tojson过滤器，把整个Python的字典列表一次性转换为合法的JavaScript数组对象即可，后续直接用原生JS语法遍历取值：

// 服务端直接将Python的data列表转换为JS可直接使用的数组
const jsData = {{ data | tojson | safe }};

// 后续正常用JS语法遍历即可，不需要再嵌套Jinja语法
for (let i = 0; i < jsData.length; i++) {
  const value = jsData[i]["key"];
  // 这里写你原来的处理逻辑
}

补充说明：加safe过滤器是为了避免Jinja自动转义JSON中的特殊字符，保证转换后的JS对象格式正确

之前几种写法的错误原因 #

• 前两种写法：在Jinja的{{ }}中使用了仅在JS运行时才存在的变量i，服务端渲染时无法识别i，直接报错
• 第三种写法：直接用{{ data }}输出的是Python对象的字符串表示，你把它赋值给temp后temp是普通字符串，用下标[i]取值只能拿到字符串的单个字符，自然无法获取字典的key对应的值

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