如何在Jinja2中使用JavaScript变量访问列表指定索引元素

问题原因 #

Jinja2 是服务端模板渲染引擎，所有 Jinja 语法的解析执行都发生在服务端，页面发送到客户端运行 JavaScript 之前就已经完成了全部渲染。你代码里的 entry_number 是客户端运行的 JavaScript 变量，Jinja 渲染时根本不存在这个值，只会把你拼接的 " + entry_number + " 整体当成列表下标去查找，自然会报错。

正确实现方式 #

最简便的方案是先把 Jinja 上下文中的 words 列表直接渲染为客户端可用的 JavaScript 数组，之后就可以直接用 JS 变量作为索引访问对应元素：

// 服务端Jinja会自动将Python的words列表转换为合法的JS数组
const words = {{ words|tojson|safe }};

function get_word() {
    let entry_number = 0;
    let g = words[entry_number]; 
}

• 这里用到的 tojson 是 Jinja 内置过滤器，会自动把 Python 列表/字典等结构转换为标准的 JSON 格式，输出的内容本身就是合法的 JS 字面量，不需要额外加引号包裹。
• 加 safe 过滤器是为了避免 Jinja 自动转义特殊字符，确保生成的 JS 语法正确。

如果 words 列表数据量极大，不想全量同步到前端，可以额外开发后端接口，前端通过 AJAX 请求携带 entry_number 参数，后端查询对应元素后返回即可。

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