如何使用 Javascript 遍历 Python/Flask 中的项目列表？

Question

我正在使用 HTML/JS/Python/Flask 创建一个图表，这个折线图的标签应该来自 Python 中的列表，然后我会在 Javascript 上使用它.

到目前为止，我无法成功地遍历 Javascript 中的那个列表，我在 HTML.

中得到了 4 次相同的字符串

我使用的代码与此类似：

start.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

<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>

我得到这个作为输出：

['ABC','DEF','GHI','JKL'][i]
['ABC','DEF','GHI','JKL'][i]
['ABC','DEF','GHI','JKL'][i]
['ABC','DEF','GHI','JKL'][i]

我正在寻找这个：

ABC
DEF
GHI
JKL

发送到 Javascript 的数据是作为文本而不是列表发送的，如果我改变这个：

text += '{{data | tojson}}[i]' + '<br>'

为此：

text += '{{data | tojson}}'[i] + '<br>'

输出变为：

[
"
A
B

控制台输出为：

[<br>"<br>A<br>B<br>

有人知道如何正确处理这个问题以便我得到正确的结果吗？

Answer 1

在 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>

或者您也可以传递字符串而不是数组。

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)

然后在HTML中你可以只打印这个连接的字符串

<body>    
   <p id='test'></p>
   <script>
     document.getElementById('test').innerHTML = {{data}};
   </script>
</body>

Answer 2

您可能已经注意到，在 Javascript 方面，我是一个完全的初学者，做了一些研究，我发现我也可以在 Javascript 中进行切片和拆分。所以我用这两种方法解决了我的问题。

提供有关我所做的更多详细信息，{{data}} 作为单个字符串传递给 Javascript，如 '['ABC','DEF','GHI','JKL']'，如果您将此字符串作为控制台输出读取，它会显示：

[&#39;ABC&#39;, &#39;DEF&#39;, &#39;GHI&#39;, &#39;JKL&#39;]

为了解决这个问题，我首先将字符串切片：

flask_data = '{{data}}';
temp_array = flask_data.slice(6,-6);

所以我得到了这个结果：

ABC&#39;, &#39;DEF&#39;, &#39;GHI&#39;, &#39;JKL

然后我使用以下子字符串拆分字符串：'', ''，如下所示：

array = temp_array.split('&#39;, &#39;');

结果我得到了我需要的数组：

['ABC','DEF','GHI','JKL']

如何使用 Javascript 遍历 Python/Flask 中的项目列表？

How to iterate over a list of items from Python/Flask using Javascript?

javascript

python

iteration

list

flask