如何将Flask视图中的数组传递至另一视图的JavaScript代码？

我来帮你搞定这个问题！你遇到的核心问题是Flask模板直接渲染Python列表到HTML属性时，会被自动转成带空格的字符串，导致HTML只识别到第一个元素，而且JavaScript也没法直接把这个字符串当成数组使用。下面是两种靠谱的解决方案：

方法一：直接在JS中使用tojson过滤器（推荐） #

这是最简单直接的方式，不需要借助meta标签，直接把Flask传递的Python列表通过tojson过滤器转换成合法的JavaScript数组：

修改你的pie.html中的<script>部分：

<script>
// 用tojson过滤器将Python列表转为JS可识别的数组
var labelsData = {{ labels|tojson }};
var valuesData = {{ values|tojson }};
var colorsData = {{ colors|tojson }};

new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: {
      labels: labelsData,
      datasets: [{
        label: "Pie Chart",
        backgroundColor: colorsData,
        data: valuesData
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Pie Chart Title'
      }
    }
});
</script>

原理说明 #

tojson是Flask内置的模板过滤器，它会把Python的列表、字典等数据结构转换成符合JavaScript语法的JSON格式。这样渲染后的代码里，labelsData会直接是一个JS数组，不需要额外的解析步骤，完全适配Chart.js的需求。

方法二：用meta标签传递（需配合JSON解析） #

如果你一定要保留meta标签的方式，需要给属性值加上引号，并使用tojson过滤器，最后在JS中用JSON.parse转换：

修改pie.html的meta标签和JS部分：

<!-- 给data属性值加上引号，并用tojson转成JSON字符串 -->
<meta id="labels_data" data-labels="{{ labels|tojson }}">
<meta id="values_data" data-values="{{ values|tojson }}">
<meta id="colors_data" data-colors="{{ colors|tojson }}">

<script>
// 将JSON字符串解析为JS数组
var labelsData = JSON.parse(document.getElementById("labels_data").dataset.labels);
var valuesData = JSON.parse(document.getElementById("values_data").dataset.values);
var colorsData = JSON.parse(document.getElementById("colors_data").dataset.colors);

// 后续Chart代码保持不变
new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: {
      labels: labelsData,
      datasets: [{
        label: "Pie Chart",
        backgroundColor: colorsData,
        data: valuesData
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Pie Chart Title'
      }
    }
});
</script>

为什么之前的方法失效？ #

你之前直接写data-labels={{labels}}时，Flask会把Python列表（比如['python', 'flask']）渲染成data-labels=['python', 'flask']。HTML解析属性值时，会把空格当作属性值的结束符，所以最终只会拿到['python',这部分内容，自然只有第一个元素，而且是字符串类型，不是数组。

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