- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是一个使用 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/
我正在处理一组标记为 160 个组的 173k 点。我想通过合并最接近的(到 9 或 10 个组)来减少组/集群的数量。我搜索过 sklearn 或类似的库,但没有成功。 我猜它只是通过 knn 聚类
我有一个扁平数字列表,这些数字逻辑上以 3 为一组,其中每个三元组是 (number, __ignored, flag[0 or 1]),例如: [7,56,1, 8,0,0, 2,0,0, 6,1,
我正在使用 pipenv 来管理我的包。我想编写一个 python 脚本来调用另一个使用不同虚拟环境(VE)的 python 脚本。 如何运行使用 VE1 的 python 脚本 1 并调用另一个 p
假设我有一个文件 script.py 位于 path = "foo/bar/script.py"。我正在寻找一种在 Python 中通过函数 execute_script() 从我的主要 Python
这听起来像是谜语或笑话,但实际上我还没有找到这个问题的答案。 问题到底是什么? 我想运行 2 个脚本。在第一个脚本中,我调用另一个脚本,但我希望它们继续并行,而不是在两个单独的线程中。主要是我不希望第
我有一个带有 python 2.5.5 的软件。我想发送一个命令,该命令将在 python 2.7.5 中启动一个脚本,然后继续执行该脚本。 我试过用 #!python2.7.5 和http://re
我在 python 命令行(使用 python 2.7)中,并尝试运行 Python 脚本。我的操作系统是 Windows 7。我已将我的目录设置为包含我所有脚本的文件夹,使用: os.chdir("
剧透:部分解决(见最后)。 以下是使用 Python 嵌入的代码示例: #include int main(int argc, char** argv) { Py_SetPythonHome
假设我有以下列表,对应于及时的股票价格: prices = [1, 3, 7, 10, 9, 8, 5, 3, 6, 8, 12, 9, 6, 10, 13, 8, 4, 11] 我想确定以下总体上最
所以我试图在选择某个单选按钮时更改此框架的背景。 我的框架位于一个类中,并且单选按钮的功能位于该类之外。 (这样我就可以在所有其他框架上调用它们。) 问题是每当我选择单选按钮时都会出现以下错误: co
我正在尝试将字符串与 python 中的正则表达式进行比较,如下所示, #!/usr/bin/env python3 import re str1 = "Expecting property name
考虑以下原型(prototype) Boost.Python 模块,该模块从单独的 C++ 头文件中引入类“D”。 /* file: a/b.cpp */ BOOST_PYTHON_MODULE(c)
如何编写一个程序来“识别函数调用的行号?” python 检查模块提供了定位行号的选项,但是, def di(): return inspect.currentframe().f_back.f_l
我已经使用 macports 安装了 Python 2.7,并且由于我的 $PATH 变量,这就是我输入 $ python 时得到的变量。然而,virtualenv 默认使用 Python 2.6,除
我只想问如何加快 python 上的 re.search 速度。 我有一个很长的字符串行,长度为 176861(即带有一些符号的字母数字字符),我使用此函数测试了该行以进行研究: def getExe
list1= [u'%app%%General%%Council%', u'%people%', u'%people%%Regional%%Council%%Mandate%', u'%ppp%%Ge
这个问题在这里已经有了答案: Is it Pythonic to use list comprehensions for just side effects? (7 个答案) 关闭 4 个月前。 告
我想用 Python 将两个列表组合成一个列表,方法如下: a = [1,1,1,2,2,2,3,3,3,3] b= ["Sun", "is", "bright", "June","and" ,"Ju
我正在运行带有最新 Boost 发行版 (1.55.0) 的 Mac OS X 10.8.4 (Darwin 12.4.0)。我正在按照说明 here构建包含在我的发行版中的教程 Boost-Pyth
学习 Python,我正在尝试制作一个没有任何第 3 方库的网络抓取工具,这样过程对我来说并没有简化,而且我知道我在做什么。我浏览了一些在线资源,但所有这些都让我对某些事情感到困惑。 html 看起来
我是一名优秀的程序员,十分优秀!