ReferenceError: 'message' is not defined

Question

There is a problem in the line const message = JSON.parse(message);. The message is a JSON which is coming from backend in python flask. If I normally write <span>{{message}}</span> in HTML tags, this prints out the JSON file. But I cannot parse it for some reason?

<!doctype html>
<html lang="en">
    <head>
        <title>{{ title }} - Status Checker</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/styles.css') }}">
      
        

<script>

    const message = JSON.parse(message);
</script>
    
    </head>
    <body>

        <ul>
            <li>
             <span>TestDrive</span>
             <span class="badge badge-pill badge-success">Operational</span>
            </li>
         </ul>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

Python method:

@app.route('/index')
def index():
    user = {'username': 'Me'}
 
------------------------------------------------DATA--------------------


    message=json.dumps(dicts)
    return render_template('index.html', title='Home', user=user, message = message)

JSON:

{"thing":"value",
  "more":"stuff"}

Have you tried putting `const message = JSON.parse(message)` inside `window.onload = function() { }`? — codemax, Sep 09 '20 at 12:19
No, I dont have an idea of what that is. Tried this, didnt work :/ — , Sep 09 '20 at 12:20

rudevich · Answer 1 · 2020-09-09T12:39:40.293

0

It seems, you need to parse it like that:

let message = {{ message }} 
JSON.parse(message)

So the problem is that template variables are parsed by the server, but you are trying to pass them into JS (browser)

edited Sep 09 '20 at 12:39

answered Sep 09 '20 at 12:23

rudevich

71
3

SyntaxError: JSON.parse: expected property name or '}' at line 1 column 2 of the JSON data. – Sep 09 '20 at 12:25
updated the answer ) relying to this answer https://stackoverflow.com/questions/11178426/how-can-i-pass-data-from-flask-to-javascript-in-a-template the problem was about quotes – rudevich Sep 09 '20 at 12:29
It gives the same error somehow :/ – Sep 09 '20 at 12:32
ok, lets try to remove the quotes – rudevich Sep 09 '20 at 12:39

ParthS007 · Accepted Answer · 2020-09-09T12:37:13.810

0

You have to load the json object after doing json.dumps.

message = json.dumps(dicts)
message_dump = json.loads(message)
return render_template('index.html', title='Home', user=user, message=message_dump)

Now, you can use the json object directly without parsing in the script tag and parse the key values by iterating through it.

Now, you can use like {{ message["things"] }} for printing the "value" in HTML and so on.

edited Sep 09 '20 at 12:37

answered Sep 09 '20 at 12:26

ParthS007

2,581
1
22
37

It still gives message not defined when trying to even use console.log(message) in script – Sep 09 '20 at 12:29
You don't need the script tag now, you can directly iterate the `message` key values in jinja template HTML. – ParthS007 Sep 09 '20 at 12:31
How would I iterate them? something like this? {{message[0]}}? That still gives me only the character of '{' instead of the first key value. – Sep 09 '20 at 12:33
I have updated my answer. can you check with that? – ParthS007 Sep 09 '20 at 12:37
You have to pass `message_dump` in `render_template` instead of `message`. – ParthS007 Sep 09 '20 at 12:39
And can i use this method somehow in javascript? because I have to put some if statements which depends on the value of the key? – Sep 09 '20 at 12:42
You can also use `if, else` in jinja also depending on the key, but that is not what the question is about. Are you able to iterate through the message json? – ParthS007 Sep 09 '20 at 12:44
Yes, I am able to iterate through it now, but for the usability purposes, isnt it better to parse it to json in javascript so i can make my functions dynamic? – Sep 09 '20 at 12:46
I would recommend you to ask a different question about that. – ParthS007 Sep 09 '20 at 12:48
1

Thank you, i figured out the rest of the syntax for javascript processing. – Sep 09 '20 at 12:50

score -1 · Answer 3 · answered Sep 09 '20 at 12:24

-1

Define message before using it in JSON.parse.

answered Sep 09 '20 at 12:24

pl2ern4

340
2
10

This is not an answer, you can comment. – ParthS007 Sep 09 '20 at 12:32
reference error coming because ‘message’ variable not defined. – pl2ern4 Sep 09 '20 at 12:34
@ParthS007 checkout [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined) for more info. – pl2ern4 Sep 09 '20 at 12:40

ReferenceError: 'message' is not defined

3 Answers3