How do I pass my JSON string using Flask?

Question

I have created a JSON string. It looks like this:

{
 "version": 1,
 "type": "exercise",
 "Exercises": {
  "Exercises": [
   {
    "Overhead Press": [
     {
      "id": 1,
      "interval": 10,
      "resistance": 55,
      "set_number": 1,
      "workout_id": 2,
      "workout_date": "2022-01-03T06:00",
      "exercise_id": 1,
      "exercise_name": "Overhead Press"
     }
    ]
   }
  ]
 }
}

I created it using json.dumps like this: json_exercise_col = json.dumps(exercise_col, default=default, indent=1)

I think my json string is good. I could be wrong so I have included it to have a second pair of eyes on it.

I pass it through like this:

return render_template("graph.html", graph_exercises=json_exercise_col, dropdown_menu=unique_exercise_names)

Now all I want to do is print it to my console.log . I use this: console.log({{graph_exercises}})

I get this error: Uncaught SyntaxError: "" string literal contains an unescaped line break

I have tried this explination of parsing JSON strings: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

When I do their simple example it works.

const g = '{"result":true, "count":42}';
const l = JSON.parse(g)
console.log(l);

But when I try to do it with my string passed using Flask it does not.

const f = JSON.parse('{{graph_exercises}}')
console.log(f)

What am I missing here? Is there something special I need to do because I'm passing it through Flask? Am I just using JSON.parse() incorrectly?

Source for the HTML / JS:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const g = '{"result":true, "count":42}';
    const l = JSON.parse(g)
    console.log(l);
    const f = JSON.parse('{
 &#34;version&#34;: 1,
 &#34;type&#34;: &#34;exercise&#34;,
 &#34;Exercises&#34;: {
  &#34;Exercises&#34;: [
   {
    &#34;Overhead Press&#34;: [
     {
      &#34;id&#34;: 1,
      &#34;interval&#34;: 10,
      &#34;resistance&#34;: 55,
      &#34;set_number&#34;: 1,
      &#34;workout_id&#34;: 2,
      &#34;workout_date&#34;: &#34;2022-01-03T06:00&#34;,
      &#34;exercise_id&#34;: 1,
      &#34;exercise_name&#34;: &#34;Overhead Press&#34;
     }
    ]
   }
  ]
 }
}')

Answer 1

Let's take your first example

const g = '{"result":true, "count":42}';
const l = JSON.parse(g)
console.log(l);

The g variable is an object which can be parsed. Now if you look at the example from the MDN docs you can see JSON.parse being used as so:

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

With your example you're not passing any JSON it looks like you're just passing a string that's wrapped in {{... }}

You could either export your JSON to a variable and pass that. So like the following:

const someJson = graph_exercises
const parsedJson = JSON.parse(someJson)

But a few things here...

• 1. Your question has a lot of JS and very little Python so things aren't too clear without seeing the code in the files.
• 2. I would stop using just letters for variable names, eventually it will not be clear to you in your code base what is what.
• 3. What I think you really need is an understanding of Jinja templates.

3

You say you're importing the JSON into your template like so:

render_template("graph.html", graph_exercises=json_exercise_col, dropdown_menu=unique_exercise_names)

In graph.html you're able to access graph_exercises within your html by using Jinja. So you could use Jinja to loop through your JSON. Something like....

<div>
  {% for graph in graph_exercises | safe %}  
    <span id="exercise">{{graph.type}}</span>
  {% endfor %}
</div>

As a very basic example. You can find more information on Jinja here:

https://jinja.palletsprojects.com/en/3.1.x/

https://www.reddit.com/r/flask/comments/itdtix/flask_json_parsing_and_structure_with_jinja_for/