如何使用 Flask 传递我的 JSON 字符串？

Question

我创建了一个 JSON 字符串。它看起来像这样：

{
 "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"
     }
    ]
   }
  ]
 }
}

我使用 json.dumps 创建了它，如下所示：json_exercise_col = json.dumps(exercise_col, default=default, indent=1)

我认为我的 json 字符串很好。我可能是错的，所以我把它包括在内是为了让第二双眼睛看到它。

我是这样通过的：

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

现在我只想把它打印到我的 console.log 上。我用这个： console.log({{graph_exercises}})

我收到这个错误： Uncaught SyntaxError: "" string literal contains an unescaped line break

我试过解析 JSON 字符串的解释： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

当我做他们的简单示例时，它起作用了。

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

但是当我尝试使用 Flask 传递的字符串执行此操作时，它没有。

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

我在这里错过了什么？因为我要通过 Flask 传递它，所以我需要做些什么特别的事情吗？我只是错误地使用了 JSON.parse() 吗？

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

让我们举第一个例子

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

g变量是一个可以解析的对象。现在，如果您查看 MDN docs 中的示例，您可以看到 JSON.parse 是这样使用的：

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

在您的示例中，您没有传递任何 JSON 看起来您只是传递了一个包含在 {{ ... }}

中的字符串

您可以将 JSON 导出到一个变量并传递它。所以像下面这样：

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

但这里有几件事...

1. 你的问题有很多 JS 而很少 Python 所以如果不看文件中的代码就不太清楚。
1. 我会停止只使用字母作为变量名，最终您在代码库中将不清楚什么是什么。
1. 我认为您真正需要的是了解 Jinja 模板。

3

你说你要像这样将 JSON 导入到你的模板中：

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

在 graph.html 中，您可以使用 Jinja 在 html 中访问 graph_exercises。所以你可以使用 Jinja 循环遍历你的 JSON。像....

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

作为一个非常基本的例子。您可以在此处找到有关 Jinja 的更多信息：

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

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

如何使用 Flask 传递我的 JSON 字符串？

How do I pass my JSON string using Flask?

javascript

json

flask

3