如何在Jinja2列表中通过动态索引取值？（Django+Plotly场景）

你碰到的核心问题是Jinja2服务端渲染和客户端JS的执行时机不兼容。

Jinja2是在页面发送给浏览器前就把模板标签替换成实际内容的——硬写all_graphs.0的时候，服务端直接把第0个图表的JSON数据插在了JS代码里，所以能正常运行；但你换成动态变量id时，Jinja2在渲染阶段根本不知道这个id是浏览器端运行时才会生成的值，自然没法正确解析这个动态索引。

正确的解决思路 #

把所有图表数据一次性转成JSON格式传给前端JS，让客户端自己用动态索引去取对应数据渲染。

具体实现代码 #

1. 在模板里传递完整图表列表
   用Django的json_script过滤器把all_graphs转成安全的JSON格式，存入页面：

   {{ all_graphs | json_script:"graphs-data" }}
   

   再在JS里把这个数据转成可操作的数组：

   // 从页面获取所有图表数据，转成JS数组
   const allGraphs = JSON.parse(document.getElementById('graphs-data').textContent);
   

2. 修改JS渲染函数
   现在可以用动态id直接从allGraphs数组里取数据了：

   function graphshow(s) {
     const selectedId = Number(s[s.selectedIndex].id);
     // 加边界检查，防止无效索引导致报错
     if (selectedId >= 0 && selectedId < allGraphs.length) {
       // 用react比plot更高效，适合更新已有图表
       Plotly.react('id_of_div_to_show_graph', allGraphs[selectedId], {});
     } else {
       console.warn('选中的图表索引无效');
     }
   }
   

3. 下拉框示例
   确保下拉选项的id是正确的索引值：

   <select onchange="graphshow(this)">
     <option id="0">图表1</option>
     <option id="1">图表2</option>
     <!-- 更多图表选项 -->
   </select>
   <div id="id_of_div_to_show_graph"></div>
   

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