如何访问由Python传递的前端JavaScript中的数组(JSON)？
我是一个真正的noobie，使用的是Flask框架(以及一般的客户机-服务器)，所以请原谅我。我有一个基本的HTML模板文件，带有一些Flask (使用{% . %}符号)从python文件中传入一个JSON对象。现在，作为一个简单的检查，它将motifs (数组的一个数组)的内容作为一个无序列表(<ul>)中的单独行(<li>)输出。
相反，我想要做的是使用JavaScript脚本中的数组的JavaScript数组作为数据进行可视化。我尝试将Flask脚本混合到一个JavaScript <script>标记中，该标记迭代出一个JavaScript数组，但得到了一个错误，即脚本标记不喜欢JavaScript标记(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>上面文件的输出如下所示(缺少没有复制的要点)：
以下是一些主题：
{“基因1”：1，“遗传2”：1，“基因3”：7，“遗传4”：7，“遗传5”：1}
{“基因1”：7，“基因2”：4，“基因3”：10，“遗传4”：5，“基因5”：2}
{“基因1”：7，“基因2”：1，“基因3”：8，“遗传4”：5，“遗传5”：8}
{“基因1”：2，“遗传2”：4，“基因3”：6，“遗传4”：1，“遗传5”：9}
{“基因1”：3，“基因2”：8，“基因3”：2，“遗传4”：7，“遗传5”：8}
{“基因1”：1，“遗传2”：5，“基因3”：1，“遗传4”：9，“遗传5”：5}
{“基因1”：3，“基因2”：5，“基因3”：6，“遗传4”：10，“遗传5”：9}
{“基因1”：2，“基因2”：10，“基因3”：7，“遗传4”：5，“基因5”：10}
{“基因1”：5，“基因2”：5，“基因3”：10，“遗传4”：10，“基因5”：5}
{“基因1”：10，“基因2”：4，“基因3”：4，“遗传4”：6，“遗传5”：4}
下面是我访问由<script>传递的数组(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>回答 2
Stack Overflow用户
发布于 2013-09-17 01:12:17
因此，您的<script>在web浏览器中尝试失败是因为您试图运行jinja2代码 (默认情况下随烧瓶附带的模板引擎)的原因。web浏览器没有python解释器，更不用说构建在python之上的模板引擎了。
话虽如此，您可以通过几种方法从烧瓶到客户端获取JSON数组。最简单的方法可能是将数组作为直接html传递并解析HTML。，但这不是很灵活，如果数组变得非常大，它可能会非常慢。
为了彻底起见，这个问题的答案是如何从jinja2中直接做一些事情。
对于我的例子，我将创建一个javascript函数，它在页面加载时被调用。这个javascript函数对烧瓶应用程序进行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
});
});烧瓶文件
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")Stack Overflow用户
发布于 2013-09-16 19:26:13
使用json.dumps确保您的母题字典是正确的JSON。
try:
import simplejson as json
except:
import json
...
motifValuesArray[index] = {{json.dumps(motif)}};https://stackoverflow.com/questions/18835414
复制相似问题
腾讯云开发者
