gpt4 book ai didi

javascript - 如何在前端 JavaScript 中访问 Python(Flask)传递的数组(JSON)?

转载 作者:行者123 更新时间:2023-11-29 19:47:44 24 4
gpt4 key购买 nike

我是一个使用 Flask 框架(通常是客户端-服务器)的真正新手,所以请多多包涵。我有一个基本的 HTML 模板文件,其中包含一些 Flask(使用 {% ... %} 符号)从 python 文件传入 JSON 对象。现在,作为一个简单的完整性检查,它正在输出 motifs 的内容。 (数组的数组)作为无序列表(<li>)中的单独行(<ul>)。

我想让它做的是使用 motifs JavaScript 脚本中的数组数组作为我正在尝试做的可视化的数据。我尝试将 Flask 脚本混合到 JavaScript 中 <script>迭代出 JavaScript 数组的标记,但出现脚本标记不喜欢 Flask 符号 (Uncaught SyntaxError: Unexpected token }) 的错误。那么如何让 Flask 脚本吐出数组以用于 JavaScript 脚本?我意识到我可能在这里误解了一些事情(也许是 JSON 的本质?)。如果有任何正确方向的插入,我将不胜感激。谢谢!

下面我将我的 html 模板包含在创建无序列表的 Flask 脚本中,我还包含了我在 <script> 中使用 Flask 脚本的失败尝试。标签。那么如何在 JavaScript 中成功访问数组 (JSON)?

index.html(模板文件 - 为清楚起见在此处进行了简化):

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>

<p>Here are some motifs:</p>
<ul>
{% for motif in motifs %}
<li>{{motif}}</li>
{% endfor %}
</ul>
<script>one of a few js scripts</script>
</body>
</html>

上述文件的输出如下所示(缺少未复制的要点):

这里有一些主题:

{'gene1': 1, 'gene2': 1, 'gene3': 7, 'gene4': 7, 'gene5': 1}

{'gene1': 7, 'gene2': 4, 'gene3': 10, 'gene4': 5, 'gene5': 2}

{'gene1': 7, 'gene2': 1, 'gene3': 8, 'gene4': 5, 'gene5': 8}

{'gene1': 2, 'gene2': 4, 'gene3': 6, 'gene4': 1, 'gene5': 9}

{'gene1': 3, 'gene2': 8, 'gene3': 2, 'gene4': 7, 'gene5': 8}

{'gene1': 1, 'gene2': 5, 'gene3': 1, 'gene4': 9, 'gene5': 5}

{'gene1': 3, 'gene2': 5, 'gene3': 6, 'gene4': 10, 'gene5': 9}

{'gene1': 2, 'gene2': 10, 'gene3': 7, 'gene4': 5, 'gene5': 10}

{'gene1': 5, 'gene2': 5, 'gene3': 10, 'gene4': 10, 'gene5': 5}

{'gene1': 10, 'gene2': 4, 'gene3': 4, 'gene4': 6, 'gene5': 4}

下面是我在 <script> 中访问失败的尝试Flask 传递的数组(JSON 对象):

<script>
var motifValuesArray = [];
var index = 0; // an iterator to assign indexes in the javascript array
{% for motif in motifs %}
motifValuesArray[index] = {motif};
console.log(motifValuesArray[index]);
{% endfor %}
</script>

最佳答案

所以你的 <script> 的原因尝试 failed is because you're attempting to run jinja2 code (默认情况下 flask 自带的模板引擎)在网络浏览器中。 The web browser doesn't have a python interpreter let alone a templating engine that is built on top of python.

话虽如此,您可以通过多种方式将 JSON 数组从 Flask 获取到客户端。 Probably the simplest way is to pass the array as straight HTML and parse the html.但这不是很灵活,如果您的阵列变得非常大,速度可能会非常慢。

Just to be thorough, this SO answer goes through how to do things straight from jinja2.

在我的示例中,我将创建一个在页面加载时调用的 javascript 函数。此 javascript 函数对 flask 应用程序进行 ajax 调用,接收 JSON 格式的数组,最后解析对象以返回数组。

Javascript

$(document).ready(function() {
var request = $.ajax({
type: "POST",
url: "/example_array/",
data: {"name":""}, // if you wanted to specifiy what list then pass an actual name
dataType: "html"
});

request.done(function(JSON_array) {
array_data = JSON.parse(JSON_array)["array"]
//from here you have your array to play with
});
});

flask 文件

from flask import jsonify

@app.route("/example_array/")
def example():
list = get_list() # however you get your list data, put it here
return jsonify(array=list)

@app.route("/")
def index():
return render_template("home_page.html")

关于javascript - 如何在前端 JavaScript 中访问 Python(Flask)传递的数组(JSON)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18835414/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com