如何在Django模板变量中嵌入JS字符串变量以复用图表更新函数

我用Django模板变量填充图表数据，还有一个点击按钮更新图表的函数。不想重复写7个相同的JS函数，想修改函数让Django模板变量根据按钮ID（值为A、B、C、D、E、F）调用对应数据。

原代码：

var results = {{ all_test_results.A.curve_series.curve_series }}.map(function(val, i) {
    return val === 'None' ? null : val;
});

期望修改后的代码（写法不正确）：

const btn_id = this.id.slice(-1); // A, B, C, D, etc

var results = {{ all_test_results.{{ btn_id }}.curve_series.curve_series }}.map(function(val, i) {
    return val === 'None' ? null : val;
});

想知道有没有办法把JS字符串注入到Django模板变量中实现动态取值。

你不能直接在Django模板标签里嵌套JS变量——因为Django模板是服务器端渲染，在页面加载前就已经处理完所有模板变量，而JS变量是客户端运行的，此时模板渲染早就结束了，没法让模板识别客户端的JS值。

正确的做法是先把所有需要的all_test_results数据一次性传给前端JS，再通过JS动态根据按钮ID取值：

1. 在Django模板中把数据序列化为JSON
   用Django的模板过滤器把Python的all_test_results转成合法的JS对象，确保数据能被前端直接使用：

   <script>
       // 将Django后端的all_test_results转为JS对象
       const allTestResults = {{ all_test_results|json:"safe" }};
   </script>
   

   注意：如果all_test_results是模型实例或复杂结构，需要先在视图里把它序列化为可JSON序列化的字典（比如用Django的serializers模块，或者手动构造字典）。

2. 在JS函数中动态取值
   现在可以直接通过JS变量btn_id从allTestResults里获取对应的数据：

   const btn_id = this.id.slice(-1); // 获取按钮ID末尾的A/B/C等字符
   const results = allTestResults[btn_id].curve_series.curve_series.map(function(val, i) {
       return val === 'None' ? null : val;
   });
   

   或者用箭头函数简化：

   const btn_id = this.id.slice(-1);
   const results = allTestResults[btn_id].curve_series.curve_series.map(val => val === 'None' ? null : val);
   

这样只需要写一次JS函数，就能根据不同按钮ID动态加载对应的数据，不用重复编写多个函数。

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