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

【问题标题】：How to iterate over a list of items from Python/Flask using Javascript?如何使用 Javascript 遍历 Python/Flask 中的项目列表？
【发布时间】：2022-01-11 16:27:46
【问题描述】：

我正在使用 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>

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

【问题讨论】：

标签： javascript python list flask iteration

【解决方案1】：

您可能已经注意到，当谈到 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']

【讨论】：

【解决方案2】：

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

【讨论】：

您好，我尝试了您的第一个建议，但没有成功，控制台输出为：

。我没有尝试您的其他建议，因为我需要将结果作为列表，以便我可以在我的 Javascript 中对其进行迭代。