Passing JSON data from Flask to JavaScript

Question

I am trying to pass a JSON data from flask to JavaScript.

The code I tried is from:

Passing a JSON object from Flask to JavaScript

The steps below are what I did :

I first got my data from postgreSQL in Python
I transformed the data format from DataFrame to JSON

    
def to_json2(df,orient='split'):
    df_json = df.to_json(orient = orient, force_ascii = False)
    return json.loads(df_json)


def to_fronrend(data):
    return {"data": data}

json2 = to_json2(df)
json2 = to_fronrend(json2)

I modified @Ilya V. Schurov's code

app = Flask(__name__)

@app.route('/')

def hello_world():
    data = json2
    return render_template("index.html", data = data)

app.run()

And this is my index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Hello </title>
</head>
    
<body>
    <p>Hello, <span id="username"></span></p>
    
    <script>
    var data = JSON.parse('{{ json2 | tojson | safe}}');
    document.getElementById('username').innerHTML = data.Name + " " + data.Gatein;
    </script>

    
    </body>
</html>

However, it kept showing the error

TypeError: Object of type Undefined is not JSON serializable
127.0.0.1 - - [18/Dec/2020 22:14:14] "GET / HTTP/1.1" 500 -

And the webpage(http://127.0.0.1:5000/) showing:

Internal Server Error The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application.

I spent almost 2 days on this problem, passing the json data to the JavaScript, but still don't know how to solve this... Could anyone give me some suggestion on this?

I guess you tried to add a link in the first paragraph but it doesn't seem to work — Tahirhan
– Tahirhan, Commented Dec 18, 2020 at 15:19
Like alecxe says, {{ data | tojson | safe }} (the template engine doesn't know what json2 is) — user5734311
– user5734311, Commented Dec 18, 2020 at 15:25

alecxe · Accepted Answer · 2020-12-18 15:22:25Z

1

In the template, you are using the variable json2:

{{ json2 | tojson | safe}}

but, when rendering, you are passing in variable data:

return render_template("index.html", data=data)

Replace json2 with data in your template:

{{ data | tojson | safe }}

answered Dec 18, 2020 at 15:22

alecxe

476k127 gold badges1.1k silver badges1.2k bronze badges

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

3 Comments

Hsin Over a year ago

Ohh yes, sorry I did try this before and it works! But the thing is, when I use {{ data | tojson | safe }} <-- it seems like the data cannot be sent correctly to the webpage. I mean, it always show "Hello, undefined undefined" on the webpage.

Hsin Over a year ago

Should I check my HTML file or it was caused by the python code?

alecxe Over a year ago

@Agnes try debugging it more: e.g. one thing you could do is to print out the value of data variable inside the hello_world function. Do you see Name and Gatein keys printed? Also, check for case-sensitivity.

Collectives™ on Stack Overflow

Passing JSON data from Flask to JavaScript

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related