Flask返回字符串型数组 JS访问索引仅输出左括号如何解决

当前你拿到的movies是字符串类型值，并非JavaScript原生数组，对字符串按下标[0]取值时，返回的是字符串的第一个字符也就是[，这就是页面只显示左括号的根本原因。

方案1：Flask后端根源修复（优先推荐） #

这是最规范的解决方式，从数据源层面避免返回字符串格式的数组：

• 后端不要把Python数组强转成字符串返回，直接传递原生列表对象
• 前端模板渲染时使用Flask内置的tojson过滤器，自动将Python列表转为符合JSON规范的原生JavaScript数组

后端示例代码：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def movie_page():
    movie_list = ['Aliens vs Predator: Requiem', 'Aliens', 'Anne of Green Gables']
    # 直接传递原生列表到模板，不需要手动转字符串
    return render_template('demo.html', movies=movie_list)

前端模板JS代码写法：

// 过滤器自动输出标准JSON格式数组，无需额外解析
var movies = {{ movies|tojson }};
document.getElementById("demo").innerHTML = movies[0]; // 正常输出第一个电影名称

方案2：前端解析现有字符串（临时兼容方案） #

如果暂时无法修改后端返回逻辑，可以在前端对字符串做格式转换后解析为数组：

<!DOCTYPE html>
<html>
<body>
<h2>Declaring an Array</h2>
<p id="demo"></p>
<script>
var moviesStr = "['Aliens vs Predator: Requiem', 'Aliens', 'Anne of Green Gables']";
// 将字符串内的单引号替换为JSON标准要求的双引号，再解析为原生数组
var movies = JSON.parse(moviesStr.replaceAll("'", '"'));
document.getElementById("demo").innerHTML = movies[0];
</script>
</body>
</html>

注意：如果数组元素的内容本身包含单引号，上述替换逻辑会出现解析错误，此类场景必须使用后端返回标准JSON的方案。

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