如何使用 Javascript 遍历 Python/Flask 中的项目列表？
[英]How to iterate over a list of items from Python/Flask using Javascript?
问题描述
I'm working to create a graph using HTML/JS/Python/Flask and the labels for this line graph should come from a list in Python and then I would use it on a Javascript.
我正在使用 HTML/JS/Python/Flask 创建一个图表，该折线图的标签应该来自 Python 中的列表，然后我将在 Javascript 上使用它。
So far I have not been able to successfully iterate over that list in Javascript, I'm getting 4 times the same string on my HTML.到目前为止，我还无法成功地遍历 Javascript 中的列表，我在 HTML 上得到了 4 倍相同的字符串。
I'm using a code similar to this one:我正在使用与此类似的代码：
start.py开始.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/', methods = ['GET','POST'])
def home():
data = ['ABC','DEF','GHI','JKL']
return render_template('index.html', data = data, len = len(data))
if __name__ == '__main__':
app.run(debug=True)
index.html索引.html
<body>
<p id='test'></p>
<script>
let text = '';
for (i=0; i<'{{len}}'; i++){
text += '{{data | tojson}}[i]' + '<br>'
}
console.log(text)
document.getElementById('test').innerHTML = text;
</script>
</body>
I'm getting this as an output:我将其作为 output 得到：
['ABC','DEF','GHI','JKL'][i]
['ABC','DEF','GHI','JKL'][i]
['ABC','DEF','GHI','JKL'][i]
['ABC','DEF','GHI','JKL'][i]
And I'm looking to get this instead:而我希望得到这个：
ABC
DEF
GHI
JKL
The data sent to the Javascript is sent as text and not as a list, if I change this:发送到 Javascript 的数据以文本而不是列表的形式发送，如果我更改此：
text += '{{data | tojson}}[i]' + '<br>'
To this:对此：
text += '{{data | tojson}}'[i] + '<br>'
The output becomes: output 变为：
[
"
A
B
And the console output is:而控制台 output 是：
[<br>"<br>A<br>B<br>
Do anybody know how to handle this properly so I get the correct results?有人知道如何正确处理这个问题，以便我得到正确的结果吗？
2 个解决方案
解决方案1
0 2022-01-11 16:46:42
Try this in HTML在 HTML 中试试这个
<body>
<p id='test'></p>
<script>
let text = '';
for (i=0; i<'{{len}}'; i++){
text += '{{data[i]}}' + '<br>'
}
console.log(text)
document.getElementById('test').innerHTML = text;
</script>
</body>
or you can also pass a string instead of an array.或者您也可以传递字符串而不是数组。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/', methods = ['GET','POST'])
def home():
data = ['ABC','DEF','GHI','JKL']
return render_template('index.html', data = "\n".join(data), len = len(data))
if __name__ == '__main__':
app.run(debug=True)
and then in HTML you can just print this joined string然后在 HTML 你可以打印这个加入的字符串
<body>
<p id='test'></p>
<script>
document.getElementById('test').innerHTML = {{data}};
</script>
</body>
解决方案2
0 2022-01-12 08:11:19
As you might have noticed, I'm a complete beginner when it comes to Javascript, doing some research, I found out I can slice and split in Javascript as well.您可能已经注意到，当谈到 Javascript 时，我是一个完整的初学者，做了一些研究，我发现我也可以在 Javascript 中切片和拆分。 So I solved my issue by using those two methods.所以我通过使用这两种方法解决了我的问题。
Giving more detail about what I did, {{data}} is passed over to Javascript as a single string, as '['ABC','DEF','GHI','JKL']', and if you read this string as a console output it shows:提供有关我所做工作的更多详细信息，{{data}} 作为单个字符串传递给 Javascript，如 '['ABC','DEF','GHI','JKL']'，如果您阅读此字符串作为控制台 output 它显示：
['ABC', 'DEF', 'GHI', 'JKL']
To solve this I first sliced the string with:为了解决这个问题，我首先对字符串进行了切片：
flask_data = '{{data}}';
temp_array = flask_data.slice(6,-6);
So I get this as a result:所以我得到了这个结果：
ABC', 'DEF', 'GHI', 'JKL
Then I split the string using the following substring: '', '', as follows:然后我使用下面的 substring 分割字符串：'', ''，如下：
array = temp_array.split('', '');
And as a result I got the array I needed:结果我得到了我需要的数组：
['ABC','DEF','GHI','JKL']
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.