Flask传参至Jinja2模板，JS中数组长度显示异常求助

问题场景 #

通过Flask返回包含数组的字典到前端：

data_dict = {
        'name' : stock_index_name[:6],
        'price' : stock_index_price[:6],
         #'dollar_change' : stock_index_dollar_change[:6],
         #'percent_change' : stock_index_percent_change[:6]
}

前端尝试遍历数组时，发现获取到的长度远超预期（实际应该是5），控制台打印的内容看起来像数组，但length属性显示的是字符串长度而非数组元素个数，相关JS代码如下：

<script type="text/javascript">
    
    let name = ('{{ data["name"] | tojson }}'); 

    console.log(name);
    console.log(name.length);        
</script>

问题根源 #

你错误地将tojson过滤器生成的JS数组字面量用单引号包裹，导致JS把整个内容识别为字符串，而非数组对象。此时length计算的是字符串的字符总数，自然会远大于数组实际元素个数。

比如tojson生成的内容是["SH000001", "SZ399001", ...]，加上单引号后变成了'"["SH000001", "SZ399001", ...]"'，JS会把它当成一个普通字符串处理。

解决方法 #

方法1：直接使用tojson生成的字面量 #

去掉外层的单引号，让JS直接解析tojson输出的数组格式：

<script type="text/javascript">
    let name = {{ data["name"] | tojson }}; 
    console.log(name); // 输出数组对象
    console.log(name.length); // 输出数组实际元素个数
</script>

方法2：用JSON.parse解析（备选） #

如果必须保留字符串形式（不推荐），可以先获取字符串再解析为数组：

<script type="text/javascript">
    let nameStr = '{{ data["name"] | tojson }}';
    let name = JSON.parse(nameStr);
    console.log(name.length);
</script>

额外验证步骤 #

1. 在Flask视图函数中打印len(stock_index_name[:6])，确认Python端传递的数组长度确实是预期的5；
2. 修改后查看控制台，console.log(name)应该输出Array(5)（或对应长度的数组对象），而非带引号的字符串。

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