如何将 Python+Flask 对象列表转换为 JS 对象列表？答案

【问题标题】：How do I convert Python+Flask list of objects to JS list of objects?如何将 Python+Flask 对象列表转换为 JS 对象列表？
【发布时间】：2020-08-11 18:48:20
【问题描述】：

这是一个包含对象列表的 Flask 应用程序。

from flask import *

app = Flask(__name__)

class Entry: 

    def __init__(self, name, surname):
        self.name = name
        self.surname = surname

entries = [] 

entries.append(Entry('Paul', 'McCartney'))
entries.append(Entry('John', 'Lennon'))
entries.append(Entry('George', 'Harrison'))
entries.append(Entry('Ringo', 'Starr')) 

@app.route('/')
def index():
    return render_template('index.html', entries = entries) 

if __name__ == '__main__':
    app.run(debug=True)

这是 index.html 文件：

<html>

<head>
</head>

<body>
    <script>

    var entries = "{{entries[0].name}}"
    console.log(entries)

    </script> 
</body>

</html>

在这种情况下，一切正常，控制台输出如预期的那样是Paul。

但是当我把代码改成这个的时候，

var entries = "{{entries}}"
console.log(entries[0].name)

控制台输出undefined

如果我们在这种情况下说console.log(entries)，它会返回以下内容：

[&lt;__main__.Entry object at 0x1065a2278&gt;, &lt;__main__.Entry object at 0x1065a22b0&gt;, 
&lt;__main__.Entry object at 0x1065a22e8&gt;, &lt;__main__.Entry object at 0x1065a2208&gt;]

我认为有必要以某种方式将此对象列表转换为 JS 格式，对吗？如何正确执行此操作？非常感谢！

【问题讨论】：

标签： javascript object flask type-conversion javascript-objects

【解决方案1】：

好的，我也遇到了这个错误。最好的方法（我认为是）将其转换为 JSON 对象并发送。

烧瓶：

import json

@app.route('/')
def index():
    jobj = {'data' : entries }
    return render_template('index.html', res=json.dumps(jobj))

javascript：

var res = JSON.parse('{{ res | safe }}');
console.log(res.data);

【讨论】：

【解决方案2】：

entries 是Entry Python 对象的列表。将其放入 JavaScript 对象的最佳方法是使用 JSON。 JSON 是用于在系统之间传输的一种很好的格式，但是您需要序列化您的列表才能做到这一点。 json.dumps() 仅适用于简单数据，不适用于用户定义的类。您可以做的是将Entry 对象列表转换为字典对象列表。

main.py:

from flask import *
import json

@app.route('/')
def index():
    return render_template('index.html', entries=json.dumps([ob.__dict__ for ob in entries]))

然后在您的 html 页面中，您可以在模板中使用 safe 过滤器。这告诉 jinja2 内容可以安全地按原样呈现，而不是转义 html/javascript。

index.html:

<script>
    var entries = {{ entries|safe }}
    console.log(entries)
</script>

【讨论】：