Flask Jinja2 - 解析 JSON

Question

我正在尝试在 Jinja2 HTML 模板中显示一些 JSON 结果，但它返回一个空页面，或者返回一个新行上的 JSON 的每个字符，或者每个带有空格的字符。

我发送到 Jinja2 模板的对象如下所示：

 [
  {
    "name": "John",
     "lastname": "Smith",
     "age": 22,
     "likes": [
       {"fruits":
         ["bananas", "oranges"]
         },
       {"sweets":
         ["chocolate"]
         }
       ]
     }
   ]

要将 JSON 对象发送到我使用的 Jinja2 模板：

 render_template("report.html", items=items)

在 Jinja2 模板 HTML 上，如果我使用 {{ items }} 它将完整对象显示为文本。如果我尝试获取 {{ items['name'] }} 它不会在页面上显示任何内容，页面将完全为空。

我也试过

{% for x in items %}
{{ x }}
{% endfor %}

它只显示相同的“文本”但有间距： [ { " n a m e " : "J o h n " [...]

在 HTML 文件中，我正在尝试执行以下操作：

 <div id="name">{{ items['name'] }}</div>

如何显示传递给 Jinja2 的 JSON 对象中的对象？

原文由 user9745009 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想我已经结束了。

我必须 json_dumps 首先是对象，然后是 json.loads 新对象。

 r = json.dumps(json_onject)
loaded_r = json.loads(r)
return render_template("report.html", items=loaded_r)

现在我可以使用 JSON 对象中的任何值。

原文由 user9745009 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我有一个稍微修改过的例子，对我来说效果很好：

应用程序.py:

 link_chart_data = {
    "type":
    "LinkChart",
    "items": [{
        "type": "node",
        "id": "ac1",
        "u": "static/icons/bank.png",
        "t": "45081063"
    }]
}

@app.route('/link_chart')
def covid():
    return render_template("link_chart/index.html", flask_data=link_chart_data)

然后在 templates/link_chart/index.html 中：

 <script>
    const parsedData = JSON.parse('{{ flask_data|tojson }}');
    const unparsedData = '{{ flask_data }}'
    console.log('parsed', parsedData)
    console.log('unparsed', unparsedData)
</script>

哪个产量：

 parsed,
items: Array(1)
0:
id: "ac1"
t: "45081063"
type: "node"
u: "static/icons/bank.png"
__proto__: Object
length: 1
__proto__: Array(0)
type: "LinkChart"

^^这就是我想要的。一个新的 JSON 对象

和：

 unparsed {'type': 'LinkChart', 'items': [{'type': 'node', 'id': 'ac1', 'u': 'static/icons/bank.png', 't': '45081063'}]}

^^我真的不想要。

|tojson jinja 模板 un-asciis 变量，以便它以与来自 python（烧瓶）的格式相同的格式传递。 JSON.parse() javascript 函数将它从字符串转换为 javascript 中的 JSON 对象。

我希望这有帮助。

原文由 Sharpie 发布，翻译遵循 CC BY-SA 4.0 许可协议