How do I convert Python+Flask list of objects to JS list of objects?

Question

Here's a Flask app which contains a list of objects.

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)

Here's the index.html file:

<html>

<head>
</head>

<body>
    <script>

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

    </script> 
</body>

</html>

In this case, everything works fine and console output is Paul as expected.

But when I change the code to this,

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

The console outputs undefined

If we say console.log(entries) in this case, it returns the following:

[&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;]

I assume that it's necessary to convert this list of objects to JS format somehow, am I right? How to do this properly? Many thanks!

Aniket Singh Rawat · Accepted Answer · 2020-04-28 06:39:16Z

2

Okay, I faced this error as well. The best way(I think is) by converting it to a JSON object and sending it.

flask:

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

answered Apr 28, 2020 at 6:39

Aniket Singh Rawat

363 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jignatius · Accepted Answer · 2020-04-28 07:45:31Z

entries is a list of Entry Python objects. The best way to get this into a JavaScript object is to use JSON. JSON is a great format for transfer between systems, but you need to serialise your list do that. json.dumps() only works with simple data, not user defined classes. What you can do is convert your list of Entry objects to a list of dictionary objects.

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

Then in your html page you can use the safe filter inside your template. This tells jinja2 that the content is safe to render as is, and not to escape the html/javascript.

index.html:

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

Collectives™ on Stack Overflow

How do I convert Python+Flask list of objects to JS list of objects?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related