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('{
"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"
}
]
}
]
}
}')
CodePudding user response:
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...
-
- Your question has a lot of JS and very little Python so things aren't too clear without seeing the code in the files.
-
- I would stop using just letters for variable names, eventually it will not be clear to you in your code base what is what.
-
- 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/