在JavaScript中使用Django for循环出现语法错误如何解决

Django的{% %}模板标签、{{ }}模板变量是服务端渲染专属语法，只有配置了经过Django模板引擎解析的文件，才会在服务端被替换成实际的业务数据，再返回给浏览器。

• 你把这类语法写在独立的静态JS文件中时，静态文件不会走Django模板解析流程，会原封不动返回给浏览器，JS引擎根本识别不了{% for %}这类非JS标准语法，必然报语法错误。
• 你看到其他开发者能正常运行的同类写法，全部是把Django模板语法写在Django直接渲染的HTML文件内的<script>标签中，不是写在独立静态JS文件里的，这也是你把同样代码直接写在HTML里能正常跑的核心原因。

根据你的项目场景选一种即可：

• 直接在HTML模板内写JS逻辑
  把包含Django模板标签的图表初始化代码，直接放到Django路由渲染的HTML文件的<script>标签里，不要拆分到独立静态JS文件。注意字符串类型的标签值要加引号，同时用escapejs过滤器转义特殊字符，避免渲染后JS语法报错，正确写法：

  <script>
  var config = {
      type: 'pie',
      data: {
          datasets: [{
              data: [1780000, 1630000],
              backgroundColor: [
                  '#ff0000', '#0000ff', '#ff0080', '#73ffff', '#5c26ff', '#002db3', '#ffff26', '#4cff4c', '#ff00ff'
              ],
              label: 'Population'
          }],
          labels: [{% for label in labels %} "{{ label|escapejs }}", {% endfor %}]
      },
      options: {
          responsive: true
      }
  };
  </script>
  

• HTML挂载全局变量，独立JS读取
  如果必须把图表逻辑拆分到独立静态JS文件维护，不要在JS文件里写任何Django模板语法。先在Django渲染的HTML文件里，把需要的动态数据挂载到全局window对象上：

  <!-- 写在Django渲染的HTML里，静态JS引入之前 -->
  <script>
  window.chartData = {
      labels: [{% for label in labels %} "{{ label|escapejs }}", {% endfor %}]
  }
  </script>
  

  之后在你引入的独立静态JS文件里，直接读取window.chartData.labels使用即可。
• 接口拉取动态数据
  前后端分离场景下，直接在JS加载完成后向后端发送请求拿到labels等动态数据，拿到数据后再初始化图表，全程不需要在JS代码里嵌入任何Django模板语法，是可维护性最高的方案。

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