如何访问由 Python（Flask）传递的前端 JavaScript 中的数组（JSON）？答案

【问题标题】：How to access an array (JSON) in the front-end JavaScript that was passed by Python (Flask)?如何访问由 Python（Flask）传递的前端 JavaScript 中的数组（JSON）？
【发布时间】：2013-09-21 00:56:59
【问题描述】：

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

我希望它做的是使用 JavaScript 脚本中的 motifs 数组作为我正在尝试做的可视化的数据。我尝试将 Flask 脚本混合到迭代出 JavaScript 数组的 JavaScript <script> 标记中，但得到一个错误，即脚本标记不喜欢 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>

【问题讨论】：

你能添加一个生成的 HTML/Javascript 的例子吗？
@Kyle - 上面我给出了一个在
@myusuf3 - 这个问题并不是真正的重复。作者清楚地知道如何将数据从 Flask 传递到 javascript——他们需要帮助以正确的 JSON、数组格式。
@gromiczek - 我很想看看渲染的内容，看看会出现什么问题。您总是可以将整个图案数组作为 JSON 注入，然后将其分解为数组 motifs = {{json.dumps(motifs)}};
@ myusuf3 在他上面的评论中的重复引用比当前引用的要好得多。具有重复标记权限的人可以更改重复引用吗？谢谢！

标签： javascript python arrays json flask

【解决方案1】：

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

try: 
  import simplejson as json
except:
  import json

...

motifValuesArray[index] = {{json.dumps(motif)}};

【讨论】：

@Kyle，感谢您的回复。 JSON 似乎工作正常（如果这是通过的）。这是将它们转换为 JS 数组的问题。 @myusuf3 上面的评论链接到一个有同样问题的人，所以我认为我现在走在正确的轨道上。谢谢！

【解决方案2】：

所以你的<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 数组到客户端。 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
    });
});

烧瓶文件

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 中使用数组来确定要在画布中显示哪些图像，例如数组中的值 1 确定将显示此图像，数组中的值 2 确定将显示不同的图像。我如何简单地将其用作数据而不是将其打印到屏幕上。非常感谢您的帮助和时间！