Flask Jinja2 - 解析 JSON答案

【问题标题】：Flask Jinja2 - Parse JSONFlask Jinja2 - 解析 JSON
【发布时间】：2018-10-21 20:20:15
【问题描述】：

我正在尝试在 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 对象中显示对象？

【问题讨论】：

当你说 JSON... 你的意思是 python 对象？ Jinja2 将 python 对象渲染为模板。
字典，是的...

标签： python json flask jinja2

【解决方案1】：

我想我已经走到了尽头。

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

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

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

【讨论】：

【解决方案2】：

嘿，所以你拥有的 json 是一个数组而不是一个对象，所以你必须考虑到这一点并首先访问你想要的对象，然后访问属性。

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

或

在这种情况下，x 成为对象，您可以像这样使用它：

{% for x in items %}
    <div id="name">{{ x['name'] }}</div>  
{% endfor %}

【讨论】：

感谢您的回复。但是，如果我正在制作一个对象 ` items = dict() items['name'] = "John" return render_template("report.html", items= items)` 并尝试打印 items['name'] 它仍然返回一个空页面。

【解决方案3】：

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

app.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 {&#39;type&#39;: &#39;LinkChart&#39;, &#39;items&#39;: [{&#39;type&#39;: &#39;node&#39;, &#39;id&#39;: &#39;ac1&#39;, &#39;u&#39;: &#39;static/icons/bank.png&#39;, &#39;t&#39;: &#39;45081063&#39;}]}

^^我真的不想要。

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

我希望这会有所帮助。

【讨论】：

谢谢@Sharpie，它就像一个魅力 =)

【解决方案4】：

我尝试使用 json.dumps 在 Python 中解析 JSON，但没有成功。但是，重命名了 HTML 文件。

作者：index.html

发件人：index.html.jinja

并在 Python 应用程序中重命名，

示例：return render_template('index.html.jinja', products=products)

成功了！！

【讨论】：