2

我是一个使用 Flask 框架（以及通常的客户端-服务器）的真正菜鸟，所以请耐心等待。我有一个基本的 HTML 模板文件，其中包含一些 Flask（使用 {% ... %} 表示法）从 python 文件传入 JSON 对象。现在，作为一个简单的完整性检查，它将motifs（数组的数组）的内容作为单独的行（<li>）输出到无序列表（<ul>）中。

我希望它做的是使用motifsJavaScript 脚本中的数组作为我正在尝试做的可视化的数据。我尝试将 Flask 脚本混合到<script>迭代出 JavaScript 数组的 JavaScript 标记中，但得到一个错误，即脚本标记不喜欢 Flask 表示法 ( Uncaught SyntaxError: Unexpected token }。那么我如何让 Flask 脚本咳出数组以用于JavaScript 脚本？我意识到我可能在这里误解了一些东西（也许是 JSON 的本质？）。我将不胜感激在正确方向上的任何推动。谢谢！

下面我在创建无序列表的 Flask 脚本中包含了我的 html 模板，我还包含了我在<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>
4

2 回答 2

3

因此，您<script>尝试失败的原因是因为您试图在 Web 浏览器中运行 jinja2 代码（flask 默认附带的模板引擎）。Web 浏览器没有 python 解释器，更不用说构建在 python 之上的模板引擎了。

话虽如此，您可以通过多种方式从烧瓶获取 JSON 数组到客户端。可能最简单的方法是将数组作为直接 HTML 传递并解析 html。但这不是很流畅，如果您的数组变得非常大，可能会很慢。

为了彻底起见，这个 SO 答案贯穿了如何直接从 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")
于 2013-09-17T01:12:17.087 回答
0

用于json.dumps确保您的主题字典是正确的 JSON。

try: 
  import simplejson as json
except:
  import json

...

motifValuesArray[index] = {{json.dumps(motif)}};
于 2013-09-16T19:26:13.037 回答