如何序列化 python class 以传递到 javascript

Question

I am trying to pass a variable onto a javascript in flask. But I get the following error: TypeError: Object of type MyClass is not JSON serializable

Code:

routes.py:

@app.route('/')
@app.route('/index')
def index():
    data = {
        "foo": myObj
    }
    return render_template('index.html', data=data)

To note that myObj is a custom class object of type MyClass.

index.html:

    <script src="{{ url_for('static', filename='my_script.js', type="module") }}" crossorigin="anonymous"
            defer>
    </script>
    <script>
        let data = {{ data|tojson }};
    </script>

my_script.js:

console.log(data);

I tried to simply write {{ data }} instead of {{ data|tojson }} but I get the errors: Uncaught SyntaxError: Unexpected token '&' and my_script.js?type=module:1 Uncaught ReferenceError: data is not defined at my_script.js?type=module:1

I know that there are a lot of question, but I do not find one that addresses this issue.

Answer 1

The problem here is that you're trying to pass a Python object to Javascript. It's not going to work. The best thing to do is convert it to JSON, which is compatible between Python and Javascript.

Using the json module you can serialise your dictionary. However, the Python object of MyClass is not JSON serialisable. You should be able to serialise the __data__ attribute instead, which is a dictionary of attributes in the object.

Change your Python like this:

import json

@app.route('/')
@app.route('/index')
def index():
    data = {
        "foo": myObj.__dict__
    }
    return render_template('index.html', data=json.dumps(data))